Question

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

的同时清除此信息

以下是相关div和＆amp;的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样式规则中，使其脱离内容流，标题将转到预期位置。

如何清除不透明的加贴div高度？

1 个答案: