绝对定位的div 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滚动，像这样的元素解析造型如下：

.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，它的最初的位置应该是绝对确定的。查看我的回答here了解更多有关position: fixed的信息以及与您相似的场景。

设置.frame div为position: relative（或其父母.frame）以使其生效。这会将position: fixed孩子设置在.frame的父母position: relative内。

您将需要调整定位数量（顶部，底部，左侧，右侧）以考虑不同的堆叠环境。

事情是这样的：

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

：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>