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。

这是失败的源代码顺序的图片：

Answer 1

尝试在您的 .sidenav class 中添加 top: 60px;。我假设 60px 看着你的 margin-top: 60px; 认为你可能试图将固定的 div 对齐到导航栏下方。否则 top: 0; 应该可以解决您的问题。

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

CSS: Element won't float next to siblings; works when out of flow

html

css

css-position