position의 속성 및 특징 (실제 사이트 예시)

---

CSS 코드를 작성할 때 자주 사용하는 속성들 중 `position`이라는 속성이 있습니다.

position은 문서 상에 요소를 배치하는 방법을 설정할 때 사용하며, 매우 다양한 속성값을 가지고 있습니다.

 

---

static

static은 position 속성의 기본 값으로, 요소를 일반적인 문서의 흐름에 따라 배치합니다.

이 때 일반적인 문서의 흐름이란, 우리가 문서를 읽고 작성할 때의 순서인 왼쪽에서 오른쪽, 위에서 아래쪽으로 쌓이는 것을 의미합니다.

 

position이 static인 상태에서는 아무리 offset 값을 줘도 변화가 일어나지 않고, z-index 값 또한 적용되지 않습니다.

 

relative

position이 relative인 상태에서는 static과 자기 자신을 기준으로 top, right, bottom, left 값에 따라 오프셋이 적용됩니다.

offset을 통해 상대적인 위치에 요소를 배치할 수 있다는 점이 static과 relative의 차이점이라고 볼 수 있습니다.

 

요소는 원래 있어야 할 위치를 기준으로 배치되며, 이 때 요소가 원래 있던 공간은 비워지게 됩니다.

또한, 다른 요소들의 위치에 영향을 주지 않습니다.

 

relative를 주로 사용하게 되는 경우는, 자식 요소에 absolute 값을 사용하게 될 경우, 그 기준이 될 요소에게 relative로 position 값을 설정해줍니다.

 

absolute

문서의 흐름에서 벗어나, 즉 기본 배치에서 벗어나서 배치됩니다. 이 때 배치의 기준은 가장 가까운 조상 요소입니다.

 

앞서 relative에서 언급한 것 처럼, 보통 상위 요소에게 position 값을 absolute, relative로 설정하여 그 요소를 기준으로 배치하는 경우가 많습니다.

 

fixed

fixed 또한 absolute와 마찬가지로 요소를 일반적인 문서의 흐름에서 제거하여 배치합니다.

 

하지만 absolute와 다른 점은 배치의 기준 점입니다.

fixed 속성을 가진 요소는 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치되는데, 바뀌지 않는 위치에 지정됩니다.

 

즉, 요소의 위치가 고정되어 아무리 스크롤을 내려도 화면성 똑같은 위치에 있게 됩니다.

이러한 특성을 이용해 상단 메뉴 바 등을 고정할 때 사용할 수 있습니다.

 

아래 이미지를 보면, 아무리 스크롤을 왔다 갔다 해도 우측 하단에 있는 연두색 Top 버튼은 고정되어 있는 것을 볼 수 있습니다.

 

 

 

※ 뷰포트 : 화면에서 실제 내용이 표시되는 영역을 말하며, 데스크톱의 경우 사용자가 설정한 해상도, 스마트 기기의 경우 기본으로 설정되어 있는 값에 의해 결정됩니다.

 

※ 컨테이닝 블록 :  요소의 위치와 크기를 지정하는데 사용하는 블록으로, 상대적인 값이나 요소의 위치를 지정하는 기준이 필요할 때 사용됩니다. absolute의 경우에는 static을 제외한 가장 가까운 조상이, fixed의 경우 뷰포트가 컨테이닝 블록이 됩니다.

sticky

 

sticky는 static과 fixed와 유사한 속성이라고 볼 수 있습니다.

이름 그대로 '달라붙는' 특징을 가지고 있습니다.

 

sticky 요소는 브라우저 화면을 기준으로 배치되며, 지정한 위치 전까지는 static의 특성을 가지고 있지만, 지정한 위치에 도달하면 fixed의 특성을 가지게 됩니다.

 

아래 이미지를 보면, 상세정보 리뷰 Q&A 반품/교환정보 를 확인할 수 있는 가로 메뉴 바가 브라우저 상단에 닿기 전에는 static처럼 스크롤에 따라 함께 움직이지만, 브라우저 상단에 도달하면 고정되는 것을 확인할 수 있습니다.

 

 

---

참고 자료

 

1. CSS에서 position이란?

2. CSS Position (static, relative, absolute, fixed)