position absolute relative 차이 — 5가지 한눈에

한 줄 정답 — relative는 요소를 자기 원래 자리를 기준으로 살짝 옮기되 자리는 그대로 남기고, absolute는 흐름에서 빠져 가장 가까운 position이 지정된 조상을 기준으로 좌표 배치된다. 그래서 absolute로 무언가를 띄울 때는 기준이 될 부모에 position: relative를 주는 게 정석이다.

핵심 요약#

• position은 요소의 위치 기준을 바꾸는 속성이다. 기본값은 static(일반 흐름).
• relative — 자기 원래 자리 기준으로 이동. 원래 공간은 그대로 차지한다.
• absolute — 흐름에서 빠져, 가장 가까운 positioned 조상(static이 아닌)을 기준으로 배치. 없으면 문서(초기 컨테이닝 블록) 기준.
• fixed는 뷰포트 고정, sticky는 스크롤하다 임계점에서 달라붙는다.
• z-index는 positioned 요소에만 먹고, 부모가 만든 쌓임 맥락에 갇히면 큰 값을 줘도 안 통한다.

position 속성, 5가지부터#

position이 헷갈리는 이유는 값마다 "무엇을 기준으로, 흐름에서 빠지는가" 가 다르기 때문이다. 이 둘만 표로 잡으면 정리된다.

값	위치 기준	흐름에서 빠지나	특징
static	없음(일반 흐름)	아니오	기본값. top/left 등이 무시됨
relative	자기 원래 자리	아니오(자리 유지)	살짝 이동. absolute 자식의 기준이 됨
absolute	가장 가까운 positioned 조상	예	흐름에서 빠져 좌표로 배치
fixed	뷰포트(화면)	예	스크롤해도 고정
sticky	스크롤 컨테이너	아니오(공간 유지)	임계점 전엔 relative, 후엔 시각적으로만 고정

top·right·bottom·left(그리고 z-index)는 static이 아닐 때만 효과가 있다. 위치가 안 먹는다면 십중팔구 그 요소가 아직 static이라서다.

relative — 원래 자리를 기준으로#

relative는 요소를 자기 원래 위치에서 상대적으로 이동시킨다. 핵심은 이동해도 원래 차지하던 공간은 그대로 남는다는 점이다.

.badge {
  position: relative;
  top: -4px;  /* 원래 자리에서 위로 4px */
  left: 8px;  /* 원래 자리에서 오른쪽으로 8px */
}

옆 요소들은 이 요소가 원래 자리에 있는 것처럼 배치되고, 시각적으로만 살짝 움직인다. 그래서 relative는 작은 위치 보정에도 쓰지만, 더 중요한 쓰임은 absolute 자식의 기준점을 만드는 것이다(아래에서 이어진다).

absolute — 흐름에서 빠져 기준 조상에 붙는다#

absolute는 요소를 일반 흐름에서 완전히 빼낸다. 그 자리는 사라지고(다른 요소가 메운다), 요소는 좌표로 떠서 배치된다.

이때 기준이 되는 건 가장 가까운 "positioned 조상" — 즉 position이 static이 아닌(보통 relative를 준) 조상이다. 그런 조상이 없으면 문서 전체(초기 컨테이닝 블록)를 기준으로 삼는데, 이 경우 fixed와 달리 스크롤하면 함께 움직인다.

.card {
  position: relative; /* 기준점이 된다 */
}

.card .badge {
  position: absolute;
  top: 8px;
  right: 8px; /* 카드의 오른쪽 위 모서리에 붙는다 */
}

가장 흔한 패턴이 이것이다 — 기준이 될 부모에 relative, 띄울 자식에 absolute. 부모에 relative를 깜빡하면 배지가 카드가 아니라 엉뚱하게 화면 기준으로 날아간다.

또 자주 겪는 건 absolute 요소에 너비를 안 주면 내용 폭만큼 줄어든다(shrink-to-fit)는 점이다. 가로로 넓게 펼치고 싶으면 width를 주거나 left: 0; right: 0을 함께 주면 된다.

absolute로 요소를 정중앙에 둘 때는 top: 50%; left: 50%; transform: translate(-50%, -50%)가 정석이다. 가운데 정렬의 여러 방법은 CSS 가운데 정렬 글에서 따로 다룬다.

fixed와 sticky#

• fixed — 뷰포트(화면)를 기준으로 고정된다. 스크롤해도 같은 자리에 머문다(상단 고정 헤더, 화면 구석 버튼 등). 단, 조상에 transform·filter·perspective 등이 있으면 기준이 그 조상으로 바뀌는 함정이 있다(같은 함정이 absolute에도 적용된다).
• sticky — 평소엔 relative처럼 흐름에 있다가, 스크롤이 지정한 임계점(예: top: 0)에 닿으면 그때부터 fixed처럼 달라붙는다. 스크롤되는 부모 안에서만 동작하고, 그 부모를 벗어나면 풀린다.

.nav {
  position: sticky;
  top: 0; /* 화면 맨 위에 닿으면 거기서 고정 */
}

sticky는 임계점 값(top/bottom 등)을 주지 않으면 아무 일도 일어나지 않는다. 안 붙는다면 임계점이 빠졌는지부터 본다.

z-index가 안 먹을 때#

요소가 겹칠 때 앞뒤 순서는 z-index로 정하는데, 자주 막히는 두 가지가 있다.

1. positioned가 아니다#

z-index는 position이 static이 아닌 요소(또는 flex·grid 아이템)에만 먹는다. 그냥 z-index: 999만 주고 위치 속성이 없으면 무시된다. position: relative 한 줄만 더해도 동작한다.

2. 쌓임 맥락(stacking context)에 갇혔다#

부모가 새 쌓임 맥락을 만들면, 자식의 z-index는 그 맥락 "안에서만" 비교된다. 즉 부모보다 뒤에 있는 다른 요소를 자식이 아무리 큰 z-index로도 넘어설 수 없다.

쌓임 맥락은 position + z-index뿐 아니라 opacity(1 미만), transform, filter 같은 속성으로도 생긴다(position: fixed·sticky는 z-index 없이도 항상 새 맥락을 만든다). "분명히 z-index가 더 큰데 안 올라온다"면, 조상 중에 이런 속성을 가진 요소가 있어 갇힌 경우가 많다. 이때는 그 조상의 z-index를 조정해야 한다.

실전: 카드 위에 배지 띄우기#

가장 자주 쓰는 relative + absolute 조합이다.

<div class="card">
  <span class="badge">NEW</span>
  <p>상품 설명</p>
</div>

.card {
  position: relative; /* 배지의 기준점 */
  padding: 16px;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

부모에 relative를 줬기 때문에 배지가 카드의 오른쪽 위에 정확히 붙는다. 부모의 relative를 빼면 배지는 카드가 아니라 화면 기준으로 떠버린다.

자주 묻는 질문#

Q. position relative와 absolute의 차이가 뭔가요?

A. relative는 자기 원래 자리를 기준으로 이동하고 원래 공간은 그대로 남깁니다. absolute는 흐름에서 빠져(원래 자리 사라짐) 가장 가까운 positioned 조상을 기준으로 좌표 배치됩니다. 그래서 보통 부모에 relative를 주고 자식을 absolute로 띄웁니다.

Q. absolute는 무엇을 기준으로 위치가 정해지나요?

A. 가장 가까운 "positioned 조상", 즉 position이 static이 아닌 조상입니다. 보통 부모에 position: relative를 줘서 그 부모를 기준으로 만듭니다. 그런 조상이 없으면 문서(초기 컨테이닝 블록)를 기준으로 배치되며, 이 경우 fixed와 달리 스크롤하면 함께 움직입니다.

Q. z-index를 줬는데 안 먹어요. 왜인가요?

A. 두 가지를 확인하세요. 첫째, 그 요소가 static이면 z-index가 무시됩니다 — position: relative 등을 줘야 합니다. 둘째, 조상이 transform·opacity·filter 등으로 쌓임 맥락을 만들었다면 자식의 z-index가 그 안에 갇힙니다. 이때는 조상의 z-index를 조정하세요.

Q. fixed와 sticky는 어떻게 다른가요?

A. fixed는 항상 뷰포트에 고정되어 스크롤해도 그대로입니다. sticky는 평소엔 흐름에 있다가 스크롤이 지정한 임계점(예: top: 0)에 닿으면 그때부터 고정되고, 부모 영역을 벗어나면 다시 풀립니다.

관련 글#

5종 각각의 비유와 연습까지 더 깊이 보고 싶다면 강의 회차로, 요소를 정중앙에 두는 법은 가운데 정렬 글로 이어진다.

• position 5종 — static, relative, absolute, fixed, sticky 한 번에 정리
• CSS 가운데 정렬, 가로·세로 한 번에 정리

더 알아보기#

• MDN: position