CSS position 값에는 어떤 것들이 있나요?

Question

Accepted Answer

`position`은 요소가 어떻게 배치되는지와 offset 속성(`top`/`right`/`bottom`/`left`)이 적용되는지를 제어합니다.

```css
.a { position: static; }   /* 기본값 — 정상 흐름, offset 무시 */
.b { position: relative; } /* 정상 흐름이지만 offset으로 자기 자신에서 이동 */
.c { position: absolute; } /* 흐름에서 제거, 가장 가까운 positioned 조상 기준 배치 */
.d { position: fixed; }    /* 흐름에서 제거, 뷰포트 기준 배치 */
.e { position: sticky; }   /* 하이브리드: 스크롤 임계점까지 정상, 이후 고정됨 */
```

## relative + absolute: 핵심 조합

`absolute`는 **가장 가까운 positioned 조상**(`static`이 아닌 것) 기준으로 요소를 배치합니다. 그래서 부모에 `position: relative`를 설정해 기준점으로 만듭니다.

```css
.card {
  position: relative;   /* 위치 지정 컨텍스트가 됨 */
}
.badge {
  position: absolute;   /* .card 기준으로 배치 */
  top: 8px;
  right: 8px;           /* badge를 카드의 오른쪽 위 모서리에 고정 */
}
```

이 relative-부모 / absolute-자식 패턴은 어디에나 있습니다: badge, dropdown, tooltip, 닫기 버튼 등.

## fixed vs sticky

```css
.navbar { position: fixed; top: 0; }   /* 스크롤하는 동안 화면에 고정 */
.section-header { position: sticky; top: 0; } /* 콘텐츠와 함께 스크롤하다 상단에 고정 */
```

- **fixed** — 뷰포트에 고정됨(항상 보임), 예: 영구 navbar.
- **sticky** — 임계점(`top: 0`)에 닿기 전까지 relative처럼 동작하다가, 컨테이너가 화면에 보이는 동안 거기에 머무름 — 섹션 헤더에 적합.

## 흔한 함정

`absolute`/`fixed` 요소는 **정상 흐름에서 제거**되므로 공간을 확보하지 않습니다 — 형제 요소가 마치 없는 것처럼 동작해 겹칠 수 있습니다. 이를 대비하세요(예: fixed navbar를 보정하기 위해 padding 추가).

## 왜 중요한가

`position`은 오버레이, sticky 헤더, 모달, dropdown, badge에 필수적입니다.

relative-부모/absolute-자식 관계와 fixed-vs-sticky 차이는 끊임없이 사용하는 실무적 핵심입니다.