position 속성 static, relative, absolute, fixed, sticky의 차이를 설명해주세요.

static은 기본 흐름, relative는 원래 위치 기준 이동, absolute는 positioned 조상 기준 배치, fixed는 뷰포트 고정, sticky는 스크롤 임계점 이후 고정처럼 동작합니다.

핵심 개념

핵심 기준은 기준 위치와 문서 흐름 참여 여부입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.

CSS는 cascade, layout, stacking context가 함께 동작합니다. 작은 속성 하나가 화면 전체의 배치나 접근성에 영향을 줄 수 있어 동작 원리를 알고 써야 합니다.

동작 흐름

1. 먼저 어떤 문제가 있는지 확인합니다.
2. 이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
3. 실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
4. 마지막으로 한계와 부작용을 함께 점검합니다.

실제 예시

.card {
  position: relative;
}

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

.nav {
  position: sticky;
  top: 0;
}

absolute의 기준을 만들기 위해 부모에 relative를 두는 패턴은 실무에서 매우 자주 사용합니다.

실무에서 주의할 점

• 속성 하나가 새로운 formatting context나 stacking context를 만들 수 있습니다.
• 고정 크기만으로 반응형을 처리하면 작은 화면에서 쉽게 깨집니다.
• 포커스 스타일과 색 대비를 제거하면 접근성이 크게 나빠집니다.

함께 연결해서 보면 좋은 키워드

CSS, position, 레이아웃, 스크롤

정리

한 줄로 정리하면, static은 기본 흐름, relative는 원래 위치 기준 이동, absolute는 positioned 조상 기준 배치, fixed는 뷰포트 고정, sticky는 스크롤 임계점 이후 고정처럼 동작합니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

position 속성의 기준점

position은 요소가 문서 흐름에 남는지, 어떤 기준점으로 이동하는지를 결정합니다.

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

sticky가 안 될 때 확인할 것

• top 같은 offset이 지정되어 있는가?
• 부모에 overflow: hidden/auto/scroll이 있어 스크롤 컨테이너가 바뀌지 않았는가?
• sticky 요소가 붙을 만큼 충분한 스크롤 공간이 있는가?

위치 문제는 z-index와 stacking context까지 얽히는 경우가 많으므로 DevTools에서 containing block과 computed style을 함께 확인합니다.