絕對定位的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>