overflow: hidden

position: sticky

position: sticky 를 사용하는 경우 조상 태그에 overflow: hidden 이 있으면 sticky가 적용되지 않는다.

높이

width, height 속성이 없는 경우 부모에 overflow: hidden을 사용하게 되면 자식 엘리먼트를 포함하도록 크기를 늘린다.

display: lnline-blcok 사용시 div 간 간격

<div class="box">
	<a href="#">ABCD</a>
</div>
<div class="box">
	<a href="#">가나다</a>
</div>

간격이 있는 이유 : </div>와 <div> 사이의 엔터 간격 때문
해결 방법 : div간 간격을 전부 없애던가 float나 flex를 사용한다.

z-index

z-index는 position 속성이 설정된 엘리먼트에 대해서만 적용된다.
기본값 : z-index: 0

float 영역 해제

overflow: hidden

부모 태그에 overflow: hidden을 쓰게 되면 자식 태그들을 감싸면서 float가 해제되어 영역만큼 높이가 설정된다.

::after

float를 사용한 자식의 부모 태그에 적용하여 float 영역을 해제시킨다.

#container::after {
  content: "";
  display: block;
  clear: both;
}