html - CSS：元素不会浮动在兄弟姐妹旁边；流量不足时工作

Question

我希望我的 sidenav 漂浮在下图中的绿色矩形上，并在用户垂直滚动时保持固定。

当我将它放在源代码中的其他兄弟姐妹之上时，我有一个 sidenav 浮动就好了，但是当我把它放在这些兄弟姐妹之下时，它会被分流到底部。

这是我的 sidenav 的 CSS：

.sidenav {
  float: right;
  position: fixed;
  padding-bottom: 1em;
  width: 21em;
  right: 0;
  margin-top: 60px;
  border-radius: 5px 0 0 5px;
  background-color: white;
  box-shadow: -2px 0px 8px #a7a7a7;
  overflow-x: hidden;
  transition: 0.5s;    
}

当sidenav元素在上面background-rec时，questions-container等等，它漂浮在适当的位置就好了。但是现在它仍然固定在底部，并且在加载新内容时会被进一步推下。

我也尝试过增加 z-index。

这是失败的源订单的图像：

标签： htmlcsscss-position

Answer 1

尝试添加top: 60px;您的 .sidenav 类。我假设 60px 看着你的margin-top: 60px;想法，也许你试图在导航栏下方对齐固定的 div。否则top: 0;应该解决你的问题。