문서 상에 요소를 배치하는 방법
top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정
static
- 기본값으로 요소를 일반적인 문서 흐름에 따라 배치
- top, right, bottom, left X
- 공간 O
- z-index X
relative
- 요소를 일반적인 문서 흐름에 따라 배치
- 자기 자신을 기준으로 top, right, bottom, left O
- 공간 O
- z-index O
absolute
- 요소를 일반적인 문서 흐름에서 제거
- top, right, bottom, left O
- 조상 요소에 상대적 배치
- z-index O
- 공간 X
fixed
- 요소를 일반적인 문서 흐름에서 제거
- 공간 X
- 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치
요소의 조상 중 하나가 transform, perspective, filter 속성
none이 아니면 그 조상을 컨테이닝 블록으로 삼습니다.
- top, right, bottom, left O
- 항상 새로운 쌓임 맥락을 생성
sticky
- 요소를 일반적인 문서 흐름에 따라 배치
- 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용
- 항상 새로운 쌓임 맥락을 생성
- overflow가 hidden, scroll, auto 혹은 overlay이 존재하는 가장 가까운 조상