배치의 기본, Position

position 속성은 요소를 문서 흐름에서 어떻게 배치할지를 결정한다.
top, right, bottom, left 속성과 함께 사용해 위치를 조정한다.

position 종류

① static

생략 가능한 기본값이다.
문서의 일반적인 흐름에 따라 배치되며, top, left 등의 위치 속성이 적용되지 않는다.


.box {
  position: static; /* 기본값 — 생략 가능 */
}

② relative

자기 자신의 원래 위치를 기준으로 이동한다.
원래 차지하던 공간은 그대로 유지된다.


.box {
  position: relative;
  top: 10px;   /* 원래 위치에서 아래로 10px */
  left: 20px;  /* 원래 위치에서 오른쪽으로 20px */
}

relative는 단독으로 이동 목적보다, absolute 자식의 기준점을 만들기 위해 자주 사용된다.

③ absolute

가장 가까운 position이 지정된 조상 요소를 기준으로 배치된다.
문서 흐름에서 완전히 벗어나 다른 요소에 영향을 주지 않는다.


.parent {
  position: relative; /* 기준점 역할 */
}
 
.child {
  position: absolute;
  top: 0;
  right: 0; /* 부모의 우측 상단에 배치 */
}

기준이 되는 조상 요소가 없으면 <html> (뷰포트)을 기준으로 배치된다.

④ fixed

브라우저 뷰포트(화면)를 기준으로 배치된다.
스크롤해도 항상 같은 위치에 고정된다.


.floating-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
}

네비게이션 바, 플로팅 버튼, 채팅 위젯 등에 자주 사용된다.

⑤ sticky

스크롤 위치에 따라 relative와 fixed 사이를 전환한다.
지정한 임계점에 도달하면 그 자리에 고정된다.


.header {
  position: sticky;
  top: 0; /* 상단에서 0px 지점에서 고정 */
}

sticky가 동작하려면 부모 요소에 overflow: hidden이 없어야 한다.

z-index

position이 지정된 요소끼리 겹칠 때 쌓이는 순서를 결정한다.
값이 클수록 앞에 표시되며, static이 아닌 요소에서만 동작한다.


.box-a { position: absolute; z-index: 1; }
.box-b { position: absolute; z-index: 10; } /* box-a보다 앞에 표시 */

정리

값	기준	문서 흐름	주요 사용처
`static`	없음 (기본)	유지	기본 상태
`relative`	자기 자신	유지	absolute 기준점 생성
`absolute`	position 지정된 조상	이탈	말풍선, 드롭다운, 뱃지
`fixed`	뷰포트	이탈	네비게이션, 플로팅 버튼
`sticky`	스크롤 임계점	유지 → 고정	고정 헤더, 사이드바

body {
  background: #0f172a;
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  color: #e2e8f0;
}
.container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 400px;
  margin: 0 auto;
}
.section {
  background: #1e293b;
  border-radius: 8px;
  padding: 16px;
  min-height: 80px;
}
.label {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0 0 10px;
}
.box {
  width: 100px;
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
}
 
/* ① static */
.static-box {
  position: static;
  background: #475569;
}
 
/* ② relative */
.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
  background: #3b82f6;
}
 
/* ③ absolute */
.relative-parent {
  position: relative;
}
.absolute-box {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #8b5cf6;
}
 
/* ④ fixed */
.fixed-box {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #ef4444;
  width: 80px;
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
}
 
/* ⑤ sticky */
.scroll-area {
  height: 80px;
  overflow-y: auto;
}
.sticky-box {
  position: sticky;
  top: 0;
  background: #f59e0b;
  color: #0f172a;
  width: 100%;
  box-sizing: border-box;
}
.scroll-content {
  height: 200px;
  padding-top: 12px;
  font-size: 0.8rem;
  color: #475569;
}

Open Sandbox