CSS) Position - static, relative, absolute, fixed, sticky

G_New·2025년 2월 23일

CSS

목록 보기

5/7

Position

CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다.
쉽게 말해서, 글의 흐름에서 벗어나서 요소를 자유롭게 배치할 때 쓰는 속성이다.

position에 따라서 위치를 정하는 기준이 달라지며, 속성값으로는 static, relative, absolute, fixed, sticky 가 있다.

position 속성은 요소의 정확한 위치 지정을 위해서 top, bottom, left, right 속성과 함께 사용되며, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다.

ex) top: 20px; left: 10px; => 위에서 20px, 왼쪽에서 10px 만큼 떨어지게 배치한다.

만약, top, bottom, left, right 의 값이 모두 같다면, inset 속성을 사용할 수 있다.

ex) inset: 10px; => 상하좌우에서 10px만큼 떨어지게 배치한다.

그럼 position의 속성값을 알아보자!

static

position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다.

position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치된다.

이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻한다.

❗ 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시된다!!

relative

position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있다.

요소를 원래 위치를 기준으로 상대적(relative) 으로 배치해준다고 생각하면 된다!

relative속성은 top, bottom, left, right 속성을 사용해서 위치를 지정할 수 있다.

앞서 봤던 그림에서 노란색 블럭의 position을 relative로 바꾸고, top: 20px;, left: 30px; 속성을 줘보자.

노란색 블럭이 원래 위치에서 위에서 20px, 왼쪽에서 30px 떨어져서, 밑의 빨간 블럭과 겹친걸 볼 수 있다.

absolute

❗position 속성값 중 가장 헷갈리는 속성값이라고 생각한다.

absolute는 relative와 다르게 absolute의 뜻인 절대적으로 요소를 배치해주지 않는다. 오히려 배치 기준이 상황에 따라 달라질 수 있다!

position 속성이 absolute일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾는다.

DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정된다.

❗ 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 <body> 요소가 배치 기준이 된다.

💡 이런 경우는 흔치 않은게, 보통 어떤 요소의 position 속성을 absolute로 설정하면, 부모 요소의 position 속성을 relative로 지정해주는 것이 관례이다.

예시로 살펴보자.

노란색 박스의 position 속성을 absolute로 바꿔줄 것이다.

❗ 근데, 어떤 요소의 position 속성을 absolute로 설정하려면, 부모 요소의 position 속성을 relative로 지정해야 하므로

노란색 박스의 부모 요소인 하늘색 박스의 position 속성을 relative로 바꿔주고, 노란색 박스의 position 속성을 absolute로 바꿔준 뒤, bottom: 10px;, right: 20px; 속성을 줘보자.

부모 요소인 하늘색 박스의 밑에서 10px, 오른쪽에서 20px 떨어져서 배치된걸 볼 수 있다.

🤔 그럼 만약, 하늘색 박스에 position: relative; 속성을 주지 않으면 노란색 박스는 어디 위치될까??

=> 앞서 말했듯이 최상위에 있는 <body> 요소가 배치 기준이 된다.

따라서 아래처럼 하늘색 블럭을 벗어난 위치에 배치될 것이다.

fixed

position 속성을 fixed로 지정하면 요소를 항상 고정된(fixed) 위치에 배치할 수 있다.

글의 흐름에서 완전히 빠져서, 요소의 원래 자리는 차지하지 않는다. 따라서, 다른 요소와 겹칠 수 있으니 다른 요소에 margin을 적용해야 하는 경우도 생긴다.

이게 가능한 이유는 fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문이다.

top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정한다.

예시를 통해 살펴보자.

노란색 박스의 position 속성을 fixed로 변경하고, bottom: 8px; , right: 16px; 속성을 줘보자.

위의 absolute 사진과 비슷하다. 그러나 차이점은, fixed 는 스크롤을 내려도 항상 저 위치에 고정되어있다.

스크롤을 올린 사진이다. 하늘색 블럭은 잘렸지만, 노란색 블럭은 잘리지 않고 브라우저 기준으로 동일한 위치에 위치하고 있다.

sticky

static처럼 원래 위치에 배치되어 있다가, 정해진 위치에 브라우저가 스크롤되면 그때부터 fixed처럼 고정되어 배치된다.
기본적으로는 static처럼 배치되기 때문에 요소의 원래 자리를 차지한다.

예시를 통해 살펴보자.

노란색 박스의 position을 sticky로 설정하고, top: 0; 속성을 줘보자.

처음에는 static처럼 위치해있다.

하지만, 스크롤을 내려보면?

노란색 박스가 화면 상단에 끈적하게(sticky) 붙어서 움직이지 않는 것을 알 수 있다.

여기까지 배운 내용을 활용해 요소를 배치할 때 알맞은 position을 설정하도록 하자!

G_New

기록하는 습관 만들기💫

이전 포스트

CSS) Display : block, inline, inline-block

다음 포스트