overflow:hidden와 position:absolute의 관계

불과 얼마 전까지만 해도 나는 overflow:hidden이면 그것이 감싼 요소의 넘침을 모두 숨기는 것이 줄 알았다.

그러나 그건 static한 상황에서 그럴 뿐이고 실제로는 position 속성에 영향을 받는다.

position:absolute면 해당 요소는 non-static한 부모 요소를 갖게 된다.

그리고 이 부모 요소의 overflow 속성이 실제로 적용되는 것이다.

<div class="grand-parent" style="position:relative;">
	<div class="parent" style="overflow:hidden;">
    	<div class="child" style="position:absolute;">
    	</div>
    </div>
</div>

.child는 .grand-parent의 자식 요소가 되고 .parent의 overflow 속성에는 영향을 받지 않는다.

관련 링크: https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/