포지셔닝

대부분의 요소는 문서 흐름을 따라 자동으로 배치되지만, 떠 있는 버튼이나 고정 헤더, 겹친 배지처럼 흐름에서 벗어난 배치가 필요할 때가 있습니다. position 속성이 그 역할을 합니다.

학습 목표

• static, relative, absolute, fixed, sticky의 차이를 안다.
• top, left 등 오프셋 속성으로 위치를 조정한다.
• z-index로 겹침 순서를 제어한다.
• 쌓임 맥락(stacking context)이 무엇인지 이해한다.

position 값

.a { position: static; }   /* 기본, 흐름대로 */
.b { position: relative; } /* 원래 위치 기준 이동 */
.c { position: absolute; } /* 가장 가까운 위치 지정 조상 기준 */
.d { position: fixed; }    /* 뷰포트 기준 고정 */
.e { position: sticky; }   /* 스크롤 중 특정 지점에 고정 */

값	기준	흐름에서 빠짐
static	없음	아니오
relative	자기 원래 위치	아니오
absolute	위치 지정 조상	예
fixed	뷰포트	예
sticky	스크롤 컨테이너	부분적

relative와 오프셋

relative는 요소를 흐름에 남겨둔 채 원래 위치에서 이동시킵니다.

.badge {
  position: relative;
  top: -4px;
  left: 8px;
}

오프셋(top, right, bottom, left)은 static을 제외한 position에서만 동작합니다.

absolute와 기준점

absolute 요소는 흐름에서 빠지고, 가장 가까운 position: relative(또는 absolute/fixed) 조상을 기준으로 배치됩니다. 기준이 없으면 페이지 전체가 기준이 됩니다.

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

.card .tag {
  position: absolute;
  top: 8px;
  right: 8px;
}

💡 TIP — 카드 모서리에 배지를 붙이는 가장 흔한 패턴은 부모에 relative, 자식에 absolute를 주는 것입니다. 자식의 기준점을 만들어 주는 셈입니다.

fixed와 sticky

fixed는 스크롤해도 뷰포트의 같은 자리에 머뭅니다. sticky는 평소엔 흐름을 따르다가 지정한 지점에 닿으면 고정됩니다.

.header {
  position: sticky;
  top: 0;        /* 위쪽 0에 닿으면 고정 */
  background: white;
}

.fab {
  position: fixed;
  right: 24px;
  bottom: 24px; /* 화면 우하단에 고정 */
}

z-index와 쌓임 맥락

요소가 겹칠 때 z-index가 큰 쪽이 위로 올라옵니다. 단, z-index는 position이 static이 아닐 때만 동작합니다.

.modal    { position: fixed; z-index: 100; }
.backdrop { position: fixed; z-index: 90; }

쌓임 맥락은 z-index 비교가 이뤄지는 독립된 단위입니다. position과 z-index가 함께 지정되거나, opacity < 1, transform이 적용되면 새로운 쌓임 맥락이 생깁니다.

⚠️ 주의 — 자식의 z-index가 아무리 커도 부모가 만든 쌓임 맥락을 벗어날 수 없습니다. 모달이 다른 요소에 가려진다면 부모에 걸린 transform이나 opacity가 별도 쌓임 맥락을 만들고 있지 않은지 확인하세요.

요약

• relative는 흐름을 유지한 채 이동, absolute는 흐름에서 빠져 조상 기준 배치합니다.
• fixed는 뷰포트 고정, sticky는 스크롤 중 특정 지점 고정입니다.
• z-index는 static이 아닌 요소에서만 동작합니다.
• 쌓임 맥락 안의 z-index는 그 맥락 밖과 직접 비교되지 않습니다.

연습문제

1. 카드 우상단에 배지를 붙이려면 부모와 자식에 각각 어떤 position을 줘야 할까요?
2. 스크롤해도 항상 화면 상단에 붙어 있는 헤더를 만드는 규칙을 작성하세요.
3. z-index를 줬는데 겹침 순서가 바뀌지 않습니다. 가장 먼저 확인할 점은?
4. 화면 우하단에 항상 떠 있는 버튼을 만드는 규칙을 작성하세요.

힌트 — absolute는 relative 기준점이 필요하고, sticky는 top과 함께, z-index는 position 조건이 있습니다.