绝对定位的 div 在绝对定位的父级内滚动

Question

我有一个绝对定位的 div 和两个孩子——一个绝对定位的 div 和一个将在父级内滚动的静态 div。它看起来像这样：

<div class='frame'>
  <div class='absolute-contents'>This should stay put.</div>
  <div class='static-contents'>This should scroll under it.</div>
</div>

这是 CSS：

.frame {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
  overflow-y: scroll;
}

.absolute-contents {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
  z-index: 9999;
  opacity: .9;
  padding: 40px;
}

.static-contents {
  margin: 24px auto;
  width: 400px;
  height: 3000px;
  padding: 40px;
}

我的绝对子级被限制在父级的边缘，为什么它仍然滚动，我怎样才能让它保持原样？

示例：https://codepen.io/anon/pen/wqZxXG

Answer 1

我通过将我想要滚动的元素放在带有overflow-y: scroll 的绝对定位的 div 中来解决，如下所示：

<div class='frame'>
  <div class='fix-me'></div>
  <div class='scroll-me'>
    <div class='long-content'></div>
  </div>
</div>

还有这样的样式：

.frame {
  background-color: blue;
  position: absolute;
  top: 40px;
  right: 40px;
  left: 40px;
  bottom: 40px;
  overflow-y: hidden;
}

.scroll-me {
  background-color: orange;
  position: absolute;
  top: 40px;
  right: 40px;
  left: 40px;
  bottom: 40px;
  overflow-y: scroll;
}

.fix-me {
  position: absolute;
  z-index: 999;
  top: 40px;
  left: 40px;
  right: 40px;
  height: 56px;
  background-color: purple;
}

.long-content {
  width: 480px;
  background-color: yellow;
  height: 4000px;
  margin: 20px auto;
}

笔在这里：https://codepen.io/dustinlocke/pen/vJMzpK

Answer 2

如果您不希望它移动，您应该调整您的子 div 以使用 position: fixed。 position: absolute 只是告诉 div 它的 initial 位置应该绝对确定。有关position: fixed 的更多信息以及与您的类似情况，请参阅我的回答here。

将.frame div 设置为position: relative（或.frame 的父级）以使其正常工作。这会将position: fixed 子级设置为固定在.frame 的position: relative 父级内。

您需要调整定位量（上、下、左、右）以适应不同的堆叠环境。

类似这样的：https://codepen.io/anon/pen/brJxVW

body {
  width: 100vw;
}

.frame {
  background-color: green;
  position: relative;
  width: calc(100vw - 80px);
  margin: 0 auto;
  top: 40px;
  bottom: 40px;
  overflow-y: scroll;
}

.absolute-contents {
  background-color: yellow;
  position: fixed;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
  z-index: 9999;
  opacity: .9;
  margin: 40px;
}

.big-contents {
  margin: 24px auto;
  width: 400px;
  height: 3000px;
  background-color: white;
  padding: 40px;
}

<div class='frame'>
    <div class='absolute-contents'>This should stay fixed in the green frame. Why is it scrolling?</div>
    <div class='big-contents'>This should scroll under it.</div>
</div>