static

기준 없음(기본값)

relative

요소 자신을 기준으로 배치
하지만 배치되기 전 요소의 자리는 채워지지 않는다.
그렇기 때문에 relative만을 사용한 배치는 실제로 거의 사용되지 않는다.

absolute

부모요소에 relative속성을 부여하면 그 부모요소를 기준으로 배치

fiexd

뷰포트(브라우저)를 기준으로 배치

sticky

스크롤 영역 기준으로 배치됨

position과 같이 사용하는 css속성

• top
• bottom
• left
• right
• z-index
  모두 음수를 사용할 수 있음 !

요소 쌓임 순서(Stack order)

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

1. 요소에 position 속성의 값이 있는경우 위에 쌓임.(기본값 static 제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임

요소의 display가 변경됨

position 속성의 값으로 absolute, fixed가 지정된 요소는, display속성이 block으로 변경됨.