오버 플로우 자동 부모 인 경우 절대 위치가 문서 외부가 아님

부모가 012.인 부모가 overflow:auto 인 경우 position:absolute 요소가 문서 흐름에 영향을주는 이유는 무엇입니까? (아래의 예)오버 플로우 자동 부모 인 경우 절대 위치가 문서 외부가 아님

이 예상되는 행동에 반하는 것으로 보인다 :

요소가 보통 문서 플로우로부터 제거되고; 공백이 MDN "페이지 레이아웃의 요소에 대해 작성되지 않습니다.

div.a 항상에만 키가 100 픽셀, 그리고 그것은 텍스트의 한 라인을 가지고 있으며,이 아이 (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