オーバフロー自動親の場合、文書フロー外の絶対位置

親の内部でのoverflow:autoである場合、position:absolute要素が文書フローに影響を与えるのはなぜですか？（以下の例）オーバフロー自動親の場合、文書フロー外の絶対位置

これは予想される動作に反するように思われる：

要素は通常、文書の流れから除去されます。スペースがMDN「ページレイアウト内の要素のために作成されません。

div.aは常にだけ背の高い100pxになり、そしてそれは、テキストの一行だけを持っており、それが子供（div.b）だから、垂直方向のスクロールが必要なことはありません持っています0確かにこれの高さは、ケースで、我々はdiv.c見ることができる（S身長「overflow:autoは、（以下の例のように）div.aに適用した場合、通常のドキュメントフロー外部の位置決め。

しかし、div.aはdiv.cを収容します」スクロールbを供給することにより、通常の文書フローに存在しないと考えられる位置絶対要素上の高さ） ar。どうして？ div.bの高さは依然として0であり、div.cは緑の背景が透明でないことを示します。

.a { 
 
    height: 100px; 
 
    overflow: auto; /* TOGGLE THIS LINE */ 
 
    background-color: pink; 
 
} 
 

 
.b { 
 
    position: relative; 
 
    background-color: green; 
 
} 
 

 
.c { 
 
    position: absolute; 
 
    background-color: rgba(255, 255, 255, .5); 
 
    height: 500px; 
 
    top: 0; 
 
}

<div class="a"> 
 
    I should only be 100px tall 
 
    <div class="b"> 
 
    <div class="c"> 
 
     I am position absolute with a height of 500px 
 
    </div> 
 
    </div> 
 
</div>

View on JSFiddle

出典

2017-11-30 craigmichaelmartin