オーバーフロー内で位置が固定されていない隠し親

Question

divが絶対値でwidthとheightに固定されています。スクロールバーにオーバフローオートを追加しました。この場合3人の子供がいて、そのうちの1人はposition: fixedですが、固定要素をスクロールするとスクロールもできますが、私は何が間違っているのか分かりません。

<div class="parent"> 

<div class="child-1"> 
    <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1> 
</div> 

<div class="child-2"> 
    <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1> 
</div> 

<div class="child-3"> 
    <h1>I am fixed.</h1> 
</div> 

がここにCSS

それは固定されている

.parent { 
position: absolute; 
width: 320px; 
right: 0; 
top: 0; 
height: 250px; 
overflow: auto; 
bottom: 0; 
background: yellow; 
z-index: 1000000; 
} 
.parent .child-3 { 
    position: fixed; 
    right: 0; 
    top: 5px; 
    color: red; 
} 

Answer 1

あり、それはちょうどあなたが上のスクロールを持っている親要素に固定されています。

<div class="parent"> 
    <div class="sub-parent"> 
    <div class="child-1"> 
      <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1> 
     </div> 

    <div class="child-2"> 
     <h1>Some Text Some TextSome TextSome TextSome TextSome TextSome TextSome TextSome TextSome Text</h1> 
    </div> 
    </div> 
    <div class="child-3"> 
     <h1>I am fixed.</h1> 
    </div> 

</div> 


.parent { 
    position: relative; 
} 
.sub-parent { 
    position: absolute; 
    width: 320px; 
    right: 0; 
    top: 0; 
    height: 250px; 
    overflow: auto; 
    bottom: 0; 
    background: yellow; 
    z-index: 1; 
} 

.parent .child-3 { 
    position: fixed; 
    right: 0; 
    top: 5px; 
    color: red; 
    z-index: 10 
} 

https://jsfiddle.net/baqfqojs/

あなたのために働く希望。