부모 - 자식의 관계에 있는 태그를 작성 후 자식 요소의 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
을 해도 적용되지 않습니다.