绝对定位的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

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

<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

position: fixed如果您不希望它移动,您应该调整您的子div .position: absolute只是告诉div它应该绝对确定它的初始位置.请在此处查看我的答案,了解更多信息position: fixed以及与您类似的情况.

将.framediv 设置为position: relative(或其父项.frame)以使其起作用.这将设置position: fixed子项固定在position: relative父项中.frame.

您需要调整定位量(顶部,底部,左侧,右侧)以考虑不同的堆叠上下文.

这样的事情: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>