[HTML / CSS] CSS Position - static, absolute, fixed, sticky
- 프로젝트를 진행하며, 요소를 배치하기 위해 정말 많이 썼던 Position
그런데 막상 Position이 무엇인가, 각 속성은 어떤 역할을 하는가 라고 묻는다면 명확하게 말할 수 없었다.
그래서 다섯 가지 속성에 대한 내용을 정리해보려 한다.
Position
- CSS
position속성은 문서 상에 요소를 배치하는 방법을 지정한다.
top,right,bottom,left를 통해 요소를 배치할 위치를 결정할 수 있다.
배치 유형
위치 지정 요소
position의 계산값이relative,absolute,fixed,sticky중 하나인 요소
static이 아닌 모든 요소
상대 위치 지정 요소
position의 계산값이relative인 요소
top과bottom은 원래 위치에서 세로축 거리 지정
left와right는 원래 위치에서 가로축 거리 지정
절대 위치 지정 요소
position의 계산값이absolute,fixed인 요소
top,right,bottom,left는 요소의 컨테이닝 블록(위치의 기준점이 되는 조상 요소) 모서리로부터의 거리를 지정한다.- 요소가 바깥 여백을 가진다면 거리에 더한다.
새로운 블록 서식 맥락을 생성한다.
끈끈이 위치 지정 요소
position의 계산값이sticky인 요소- 평소에는 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록이 자신의 플로우 루트(스크롤 컨테이너)에서 지정한 임계값을 넘으면 마치
fixed처럼 화면에 고정한다.
고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제
공간을 꽉 채우는 경우가 아니라면,
top과bottom을 지정한 경우(auto가 아닌 경우) top이 우선 적용left와right를 지정한 경우, direction이 ltr(영어, 한국어 등)이면 left를 우선 적용하고, direction이 rtl(페르시아어, 아랍어, 히브리어 등)이면 right를 우선 적용
1. position: static;
- 요소를 일반적인 문서 흐름에 따라 배치한다. (기본값)
top,right,bottom,left,z-index속성이 아무런 영향을 주지 않는다.
2. position: relative;
- 요소를 일반적인 문서 흐름에 따라 배치하고, 자신을 기준으로
top,right,bottom,left값에 따라 오프셋을 적용한다.
오프셋은 다른 요소에 영향을 주지 않는다. 페이지 레이아웃에서 요소가 차지하는 공간은static일 때와 같다. z-index값이 auto가 아니면 새로운 쌓임 맥락을 생성한다.
쌓임 맥락 : 가상의 Z축을 사용한 HTML 요소의 3차원 개념화
3. position: absolute;
- 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
- 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치한다.
단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼는다.
최종 위치는top,right,bottom,left값이 지정한다.- 컨테이닝 블록은
position속성 값이 static이 아닌(fixed, absolute, relative, sticky) 가장 가까운 조상의 내부 여백 영역입니다.
- 컨테이닝 블록은
z-index값이 auto가 아니면 새로운 쌓임 맥락을 생성한다.
절대 위치 지정 요소의 바깥 여백은 서로 상쇄되지 않는다.
4. position: fixed;
- 요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않는다.
- 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치한다.
단, 요소의 조상 중 하나가transform,perspective,filter속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다.
최종 위치는top,right,bottom,left값이 지정한다. - 이 값은 항상 새로운 쌓임 맥락을 생성한다.
문서를 인쇄할 때, 모든 페이지의 같은 위치에 출력된다. - 컨테이닝 블록은 뷰포트나 페이지 영역 (페이지로 나뉘는 매체인 경우)
5. position: sticky;
- 요소를 일반적인 문서 흐름에 따라 배치한다.
- 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록을 기준으로
top,right,bottom,left값에 따라 오프셋을 적용한다.
오프셋은 다른 요소에 영향을 주지 않는다. - 이 값은 항상 새로운 쌓임 맥락을 생성한다.
- 끈끈한 요소는 "스크롤 동작" (
overflow가 hidden, scroll, auto, overlay) 이 존재하는 가장 가까운 조상에 달라붙는다.
성능 및 접근성 문제
fixed나sticky를 포함하는 스크롤 요소가 성능 및 접근성 문제를 유발할 수 있다.- 브라우저는 사용자가 스크롤을 할 때마다
fixed나sticky를 포함하는 요소를 새로운 위치에 페인트 해야 하는데,
내용의 양, 브라우저 및 기기의 성능에 따라 60fps를 유지하지 못해 일부 민감한 사용자에게는 접근성 문제가, 다른 모두에게는 사용자 경험 악화가 생긴다. - 해결책
will-change: transform;- 요소를 자신만의 레이어에서 렌더링하여 페인트 속도를 향상하고, 성능 및 접근성을 높일 수 있다.
- 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공한다.
실제 요소가 변화되기 전, 미리 브라우저는 적절하게 최적화할 수 있다.
관련 예제
MDN 링크 DaleSeo 링크 해당 링크에서 속성에 대한 다양한 예제를 확인할 수 있다!
문서를 읽으며, 정확히 이해하지 못한 부분에 대해서 알아보려 한다.
절대 위치 지정 요소 : 요소가 바깥 여백을 가진다면 거리에 더한다.
absolute요소에게 바깥 여백을 줬다.
- 여백이 잘 적용된 것을 볼 수 있다.
이제.absolute클래스에left: 50px;top: 50px;을 추가한다.
기존 요소에 있던 바깥 여백에top과left로 준 만큼 추가되어 초기 컨테이닝 블록에서 떨어진 것을 볼 수 있다. (총 100px씩 떨어져 있다!)
끈끈이 위치 지정 요소
sticky요소를 설정한다.
여기에서 해당.sticky클래스에top,bottom,left,right속성을 주지 않으면, sticky가 작동하지 않는다.
여기에서 부모 요소에게 overflow: scroll; 지정 유무에 따라 다른 것을 확인할 수 있다.
[ scroll-box에 overflow를 지정했을 때 ]
- 바로 상위에 있는 부모요소 (
.scroll-box)에 달라붙는다.
[ scroll-box에 overflow를 지정하지 않았을 때 ]
- 스크롤을 해당 요소까지 내리지 않았을 때는 상위 부모요소에 담겨있는 것을 볼 수 있는데,
전체적인 스크롤이 내려갔을 때, 해당 공간에서 top만큼 떨어진 상태로 달라붙는 것을 확인할 수 있었다.
gif로 확인하면 다음과 같다.
scroll-box에 overflow를 지정했을 때 |
|---|
 |
scroll-box에 overflow를 지정하지 않았을 때 |
|---|
 |
position: absolute;
-
상위 부모의
position: relative;유무에 따라 달라진다!
[ scroll-box에position: relative;를 지정했을 때 ]
상위 부모 기준으로top과left가 적용된 것을 볼 수 있다.[ scroll-box에 아무것도 지정하지 않았을 때 ]
상위 부모가 아닌, 초기 컨테이닝 블록을 기준 배치되는 것을 확인할 수 있다.
