overflow hidden를 했는데 숨겨지지 않아요

맨날·2022년 10월 18일
2

부모 - 자식의 관계에 있는 태그를 작성 후 자식 요소의 height가 부모보다 커서 overflow: hidden 으로 숨겨야 할 일이 있었습니다.

<div class="parent">
	<div class="child">
    
    </div>
</div>

그런데 overflow: hidden을 적용해도 자식요소가 보이는 문제가 있었습니다. 알고보니 자식요소에는 position: absolute가 적용되어 있었는데 부모가 position: static인 경우 overflow: hidden이 먹히지 않았습니다.

그래서 부모 요소의 css에 position: relative를 추가하니 정상적으로 hidden 처리 되었습니다.

결론

자식 요소에 position: absolute가 있는 경우 부모 요소가 position: static 이면 overflow: hidden을 해도 적용되지 않습니다.

0개의 댓글