javascript - 如何清除不透明的附加div高度？

Question

使用 Bootstrap 和一堆用于社交媒体图标的自定义 CSS(位于 here )，我创建了一支笔来演示(和测试)我的代码。目标是创建自动适合父 div(水平或垂直等)的图标，除了一个小问题外，我一切正常。我有两个 div 附加(一个水平，一个垂直)，并且在触发附加之前 100% 不透明。但是，我知道为什么， View 仍在呈现，文档顶部和页面标题之间基本上看起来像一个巨大的边距。我怎样才能清除它，同时仍然使用 display:inline-block？

这是相关 div 和类的 CSS，但我建议查看 pen首先是因为视觉上看到它可以更好地解释问题。:

.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 样式规则中，使其脱离内容流，标题将转到预期位置。