Positioned Layout

overflow 속성은 position 속성과 결합할 때, 고려해야 할 사항들이 있다.

사례#1: Absolute w/ Overflow

.wrapper {
  overflow: hidden;
  /* position: relative 없음 */
}
.box {
  position: absolute;
}

• absolute로 설정된 자식은 "누가 나를 통제하나?"를 먼저 탐색
• 부모가 position: relative가 없으면 "통제자"가 없는 상태
• 그래서 overflow: hidden을 무시하고 위치를 잡음

따라서 자식 요소 position: absolute 상황에서는 부모의 position을 고려한 작업이 필요하다

사례#2: Containing Block과의 관계

.wrapper {
  position: relative; /* containing block이 됨 */
  overflow: auto;
}
.box {
  position: absolute;
}

absolute 요소는 containing block이 설정되면 일반 요소처럼 overflow의 영향을 받는다. 따라서 스크롤 컨테이너 안에서도 정상적으로 스크롤 가능하다.

예외: Fixed Position w/ Overflow

.wrapper {
  position: relative;
  overflow: hidden;
}
.box {
  position: fixed;
}

• fixed 요소는 일반 HTML 요소로는 contain할 수 없음
• overflow: hidden이나 auto의 영향을 받지 않음
• 항상 viewport를 기준으로 동작
• 이런 특성을 이용해 스크롤 컨테이너를 벗어나는 툴팁 등을 구현할 수 있음