CSS 포지션 속성 설명: absolute, fixed, relative 차이 설명 ✔️

CSS 포지션(postion) 속성은 요소를 문서의 특정 위치에 배치할 때 사용합니다. 요소의 최종 위치는 포지션의 top, right, bottom, left 값에 따라 결정됩니다.

• static: 일반적인 흐름을 따라 요소를 배치하는 속성입니다.
• relative: 일반적인 흐름을 따라 요소를 배치하고, 자신을 기준으로 위치 값을 적용합니다.
• absolute: 요소를 일반적인 흐름이 아닌 가장 가까운 특정 부모 요소에 따라 상대적으로 배치합니다. 부모에 특정한 포지션 속성이 없다면(static 포함) 상위 컨테이너 블록을 기준으로 합니다. 
• fixed: 요소를 일반적인 흐름이 아닌 뷰포트의 컨테이너 블록을 기준으로 배치합니다.
• sticky: 일반적인 흐름을 따라 요소를 배치하고 스크롤 되는 가장 가까운 부모 컨테이너 블록을 기준으로 위치 값을 적용합니다.

static

먼저 static 입니다. 이는 기본 포지션 값입니다. 즉, 포지션에 아무런 값을 지정해주지 않을 경우 기본적으로 지정되는 값이 바로 static 입니다. 각 요소들은 기본적인 배열 방식에 따라 위치를 차지합니다.

See the Pen CSS-Static by dev-hwi (@dev-hwi) on CodePen.

relative

relative 는 static 과 같이 일반적인 순서에 따라 요소를 표시하지만, 추가적으로 부여되는 top, right, bottom, left 와 같은 속성을 자기 자신을 기준으로 적용합니다.

See the Pen CSS-Relative by dev-hwi (@dev-hwi) on CodePen.

위 예시를 살펴보면 각 요소들이 static 에서의 위치를 기준으로 각각 적용한 속성을 따라 해당 픽셀만큼 요소가 이동한 것을 알 수 있습니다. 즉, relative 는 static 에 위치 등의 속성을 부여하는 개념이라 생각할 수 있습니다.

absolute

absolute 는 static 이 아닌 속성이 부여된 부모를 기준으로 위치를 설정합니다. 부모에 부여된 속성이 없을 경우, body를 기준으로 정렬됩니다. 말이 좀 어려울 수 있으니 다음 예시를 먼저 살펴보도록 하겠습니다.

See the Pen CSS-Absolute by dev-hwi (@dev-hwi) on CodePen.

위 예시를 살펴보면 box2와 box3가 relative 속성이 적용된 boxContainer를 기준으로 정렬된 것을 볼 수 있습니다. box1은 부모 요소에 static이 아닌 속성이 부여된 것이 없으므로 body를 통해 정렬되었습니다. 이처럼 absolute 속성을 사용하려면 부모 요소에 특정한 포지션 속성이 부여되어 있어야 합니다.

fixed

fixed 는 화면상의 특정한 위치에 고정됩니다. 다음과 같이 boxContainer 요소가 화면 우측 하단에 고정되어 있습니다. 스크롤을 내려도, 해당 요소가 고정되어 있는 것을 확인할 수 있습니다.

See the Pen CSS-Fixed by dev-hwi (@dev-hwi) on CodePen.

마치며

이상을 정리하자면 static은 기본 포지션 속성입니다. 요소를 기본 흐름에 따라 표시합니다. relative는 static 위치에서 부여된 값에 따라 포지션이 변경됩니다. absolute는 static이 아닌 다른 속성을 갖고 있는 부모를 기준으로 포지션을 설정합니다. fixed는 화면상의 특정한 위치에 요소의 포지션을 고정시킵니다.