[CSS] position

값	위치	자리 유지	크기 유지	설명
relative	상대	O	O	- 자신을 기준으로 배치한다.
absolute	절대	X	X	- 부모 중에 위치 지정 요소가 있으면 상대적으로 배치한다. - 위치 지정 요소가 없는 경우:   초기 컨테이닝 블록을 기준으로 삼는다. - 요소의 속성이 inline인 경우: block이 된다.
fixed	절대	X	X	- 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다. - 부모 중에 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다. - 요소의 속성이 inline인 경우: block이 된다.
sticky	끈끈한	O	O	- 평소에는 상대 위치로 처리된다. - 스크롤 동작이 있어야만 "끈끈한 동작"을 한다. - 조상 컨테이닝 블록을 기준으로 top, right, bottom,   left의 값에 따라 오프셋을 적용한다.

*위치 지정 요소란?

 position의 값이 relative, absolute, fixed, sticky 중 하나인 요소.

 

*컨테이닝 블록이란?

 부모 요소 중에 transform, perspective, filter 속성 중 어느 하나라도 none이 아닌 경우, 뷰포트 대신 부모를 컨테이닝

 블록으로 삼는다.

 

*z-index를 사용하려면 위 속성들을 사용해야 한다.

---

position: relative | absolute | fixed 예제

See the Pen position: relative | absolute | fixed by mill (@millfeel) on CodePen.

position: sticky 예제

See the Pen [CSS] position: sticky by mill (@millfeel) on CodePen.

---

[공부 좌표]

position