如何清除不透明的贴片高度

Question

使用Bootstrap和一堆自定义CSS用于社交媒体图标(位于这里)，我创建了一支笔来演示(和测试)我的代码。目标是创建图标，将自动适合那里的父div(水平或垂直等)，我有一切工作，除了一个小问题。我有两个div贴(一个水平，一个垂直)，和100%不透明的前缀被触发之前。但是，我知道为什么，这个视图仍然呈现在文档顶部和页面标题之间，基本上看起来像一个巨大的边距。我如何清除这个，而仍然使用display:inline-block ?

下面是相关div &类，但我建议先检查一下钢笔，因为从视觉上看它能更好地解释问题。:

.snav {
  top:50%;
  margin-left:-15px;
  background: rgb(0, 0, 0);
  width:5rem;
  height:25rem;
  display:inline-block;
  z-index:99;
  transition: 1s all ease-in;
  transform: translate(0, -50%);
  opacity:0;
}

.horiz{
  top:0;
  margin-left: auto;
  margin-right:auto;
  z-index:99;
  left:50%;
  transition: 1s all ease;
  transform: translate(-50%, 0);
  opacity:0;
  display:inline-block;
}
#horiz{
  background: rgb(0,0,0);
  width:26.6rem;
  height:5rem;  
}
.affix{
  opacity:.5;
}
.affix:hover{
  opacity:.9;
}

Answer 1

页面顶部和标题之间的间隙是因为社交图标小部件仍然在内容流中。

尝试将position: fixed;添加到.snav样式规则中，将其从内容流中取出，标题将转到预期位置