絶対配置された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 class='frame'> 
    <div class='fix-me'></div> 
    <div class='scroll-me'> 
    <div class='long-content'></div> 
    </div> 
</div> 

そしてこのようなスタイリング：

ここ10

.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の詳細については、私の答えhereと同様のシナリオを参照してください。

.frame divをposition: relative（または、.frameの親）に設定してください。これにより、position: fixed子がposition: relative親の中に固定されるように、.frameに設定されます。

異なるスタッキングコンテキストを考慮するには、配置量（上端、下端、左端、右端）を調整する必要があります。

このような何か：私はそうのようなoverflow-y: scrollと絶対位置の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>