이론/CSS
[CSS] position
millfeel1298
2021. 1. 27. 03:21
| 값 | 위치 | 자리 유지 | 크기 유지 | 설명 |
| 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.
[공부 좌표]