Question

我必须固定位置的元素。一个是另一个的孩子。我将此结构用于可调整大小的下拉菜单，该菜单位于左侧菜单中。

我的问题是，如果我的左菜单将溢出设置为“滚动/自动”，则滚动条显示在子元素的顶部。如何在不更改结构的情况下使子元素位于父级滚动条的顶部？

.leftmenu {
  width: 150px;
  height: 100%;
  top:0;
  left:0;
  position:fixed;
  background-color: red;
  padding:20px;
  overflow:scroll;
}

.child {
  position:fixed;
  background-color:blue;
  width:300px;
  height:100px;
}

<div class="leftmenu">
  <div class="child"></div>
</div>

Answer 1

在position: fixed中，如果不将孩子移到父母之外，这是不可能的。如果可以更改此选项，则可以从父级中删除position: fixed，并使用100vh作为左菜单的高度。然后将子级更改为position: absolute，将其移交给父级。

.leftmenu {
  width: 150px;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: red;
  padding: 20px;
  overflow: scroll;
}

.child {
  position: absolute;
  background-color: blue;
  width: 300px;
  height: 100px;
}

<div class="leftmenu">
  <div class="child"></div>
</div>

如何将位置固定子级放置在位置固定父级的滚动条上方？

1 个答案: