[CSS] position 속성 (웹 레이아웃 구성 요소 배치)

CSS Position 속성은 HTML 요소가 웹페이지 내에서 어떻게 배치될지를 결정하는 핵심 CSS 속성이다.

기본적으로 모든 HTML 요소는 문서의 정상적인 흐름(normal document flow)을 따라 배치되지만, position 속성을 사용하면 이 흐름에서 벗어나 원하는 위치에 요소를 정확히 배치할 수 있다.

 

 

CSS Position 속성에는 5가지 주요 값이 있으며, 각각 고유한 특성과 용도를 가지고 있다.

 

 

---

1. position static (기본값)

 

.element {
  position: static;
}

• 모든 HTML 요소의 기본값
• 문서의 정상적인 흐름을 따라 배치
• top, right, bottom, left 속성이 적용되지 않음
• z-index 속성도 적용되지 않음
• 기본적인 블록 레이아웃이 필요하거나 별도의 위치 조정이 불필요한 경우 사용한다.

 

 

---

2. position relative (상대 위치)

 

.element {
  position: relative;
  top: 20px;
  left: 30px;
}

• 요소의 원래 위치를 기준으로 상대적 이동
• 다른 요소들은 해당 요소가 원래 위치에 있는 것처럼 동작
• 문서 흐름에서 제거되지 않음
• Absolute 요소의 기준점 역할 가능

 

 

---

3. absolute (절대 위치)

 

.element {
  position: absolute;
  top: 50px;
  right: 100px;
}

• 문서 흐름에서 완전히 제거
• 가장 가까운 position: relative/absolute/fixed 부모 요소를 기준으로 위치 결정
• 다른 요소들이 해당 요소가 존재하지 않는 것처럼 동작

 

---

4. fixed (고정 위치)

 

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

• 뷰포트(브라우저 창) 기준으로 위치 고정
• 스크롤과 무관하게 항상 같은 위치 유지
• sticky navigation, floating button 구현에 최적

 

 

---

5. sticky

 

.sidebar {
  position: sticky;
  top: 20px;
}

• relative + fixed의 하이브리드 동작
• 임계값 도달 전: relative 처럼 동작
• 임계값 도달 후: fixed 처럼 고정
• 스크롤 기반 인터랙션에 최적화

 

브라우저 호환성:

• Chrome 56+, Firefox 32+, Safari 13+
• IE는 지원하지 않음 (Polyfill 필요)

---

정리

 

이동 속성에 따른 동작 방식

position	top: 10px의 의미
static	적용되지 않음
relative	원래 위치에서 아래로 10px 이동
absolute	기준점에서 아래로 10px 떨어진 곳에 배치
fixed	브라우저 상단에서 10px 떨어진 곳에 고정
sticky	스크롤 시 상단에서 10px 떨어진 곳에 고정