[CSS] position 정리

🤔 position 이란?

CSS에서 position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. 

 

📖 position 속성 5가지

1. static

position을 지정하지 않았을 때의 기본값 이다.

top, right, bottom, left, z-index 영향을 받지 않는다.

2. relative

자기 자신을 기준으로 top, right, bottom, left의 값에 따라 위치를 조정한다. 위치가 바꼈을때 다른 요소에는 영향을 주지 않는다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다.

static과 다르게 z-index가 적용된다. table-*-group, table-row, table-column, table-cell, table-caption 요소에는 적용되지 않는다.

3. absolute

가장 가까운 position : relative값을 갖고 있는 조상 요소를 기준으로 배치한다. 단, 조상 중 position : relative를 가진 조상이 없다면 body를 기준으로 삼는다. 최종 위치는 top, right, bottom, left 값이 지정합니다. static과 다르게 z-index가 적용된다.

4. fixed

뷰포트를 기준으로 삼아 배치한다. 최종 위치는 top, right, bottom, left 값이 지정한다.

static과 다르게 z-index가 적용된다. 문서를 인쇄할 때는 해당 요소가 모든 페이지의 같은 위치에 출력된다.

5. sticky

sitcky 속성은 필수적으로 top, bottom, left, right들 중에 하나를 필수적으로 설정해주어야 한다. sitcky로 설정된 영역은 설정된 위치(예 top: 0px)에 도달하기 전까지는 static 속성처럼 행동하다가 설정된 위치에 다다르면 fixed 속성처럼 행동하는 속성이다.