[CSS] position

Position

 

static

기본값

요소를 일반적인 문서 흐름에 따라 배치

 

relative

요소를 일반적인 문서 흐름에 따라 배치

자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용

z-index 새로운 쌓임 맥락 생성(→ 방지하고 싶다면 z-index: auto; 설정)

 

absolute

요소를 일반적인 문서 흐름에서 제거, 페이지 레이아웃에 공간을 배정하지 않음

가장 가까운 위치 지정 조상 요소에 상대적으로 배치

(위치 지정 조상 요소는 position: static;이 아닌 요소, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록 기준)

최종 위치는 top, right, bottom, left 값이 지정

z-index 새로운 쌓임 맥락 생성(→ 방지하고 싶다면 z-index: auto; 설정)

 

fixed

요소를 일반적인 문서 흐름에서 제거, 페이지 레이아웃에 공간을 배정하지 않음

뷰포트의 초기 컨테이닝 블록을 기준으로 배치

요소의 조상 중 하나가 transform, perspective, filter 속성 중 하나라도 가진다면 그 조상 요소에 상대적으로 배치

최종 위치는 top, right, bottom, left 값이 지정

항상 새로운 쌓임 맥락을 생성(z-index)

 

sticky

요소를 일반적인 문서 흐름에 따라 배치

테이블 관련 요소를 포함해 가장 가까운 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록을 기준으로 배치

스크롤 동작이 존재하는(overflow가 hidden, scroll, auto, overlay) 가장 가까운 조상에 붙음

→ 기준이 되는 조상이 스크롤 불가하면서 스크롤 가능한 조상이 따로 존재할 경우 sticky가 동작하지 않음

최종 위치는 top, right, bottom, left 값이 지정

항상 새로운 쌓임 맥락을 생성(z-index)

 

규칙

top과 bottom을 지정한 경우, top이 우선 적용

left와 right를 지정한 경우, direction이 ltr(영어, 한국어 등)이면 left를 우선 적용, rtl(페르시아어, 아랍어, 히브리어 등)이면 right를 우선 적용

 

 

 

 

* 참고

mdn position

 

23.04.13