CSS position 속성은 요소의 위치 지정 방법을 결정합니다. 레이아웃 제어의 핵심 개념으로, 다양한 값을 통해 요소의 배치 방식을 조절할 수 있습니다.
1. position 값의 종류
값설명
| static | 기본값. 문서 흐름에 따라 배치 |
| relative | 상대적 위치 지정 (원래 위치에서 offset 적용) |
| absolute | 절대적 위치 지정 (가장 가까운 positioned 부모 기준) |
| fixed | 뷰포트 기준 고정 위치 (스크롤 시에도 이동하지 않음) |
| sticky | 스크롤 시 sticky 영역 생성 (특정 임계점까지 스크롤 시 고정) |
2. 각 position 값의 특징
1) static (기본값)
- 특징: 문서의 자연스러운 흐름을 따름
- offset 적용 불가: top, right, bottom, left 무시
.static-box {
position: static; /* 생략 가능 */
background: #eee;
}
2) relative
- 특징: 원래 위치에서 오프셋 적용
- 공간 점유: 원래 위치가 유지됨
.relative-box {
position: relative;
top: 20px;
left: 30px;
background: #ffd700;
}
3) absolute
- 특징:
- 가장 가까운 position: relative 부모를 기준
- 문서 흐름에서 제거 (공간 차지 X)
- 활용: 오버레이, 팝업, 커스텀 컨트롤
.absolute-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255,0,0,0.8);
}
4) fixed
- 특징:
- 뷰포트 기준 고정
- 스크롤 시에도 항상 화면에 표시
- 활용: 헤더, 푸터, 사이드바
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #333;
z-index: 1000;
}
5) sticky
- 특징:
- 스크롤 시 특정 임계점까지 고정
- relative와 fixed의 중간 형태
- 활용: 테이블 헤더, 목차
.sticky-header {
position: sticky;
top: 0;
background: #fff;
padding: 10px;
z-index: 1;
}
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
/* 공통 스타일 */
.container {
position: relative;
min-height: 600px;
border: 2px solid #333;
margin: 20px;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
font-size: 12px;
}
/* Static */
.static {
background: #ffd700;
}
/* Relative */
.relative {
position: relative;
background: #ff6347;
top: 20px;
left: 20px;
}
/* Absolute */
.absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #4b0082;
z-index: 1;
}
/* Fixed */
.fixed {
position: fixed;
top: 20px;
right: 20px;
background: #2ecc71;
z-index: 1000;
}
/* 시각적 구분선 */
.divider {
height: 1px;
background: #666;
margin: 10px 0;
}
</style>
</head>
<body>
<!-- Static 예시 -->
<div class="container">
<div class="box static">Static</div>
<div class="box static">Static</div>
<div class="box static">Static</div>
<div class="divider"></div>
<div class="box relative">Relative</div>
</div>
<!-- Absolute 예시 -->
<div class="container" style="position: relative;">
<div class="box absolute">Absolute</div>
<div class="box">Normal Flow</div>
<div class="box">Normal Flow</div>
</div>
<!-- Fixed 예시 -->
<div class="container">
<div class="box fixed" style="position: fixed; top: 20px; right: 20px;">Fixed</div>
<div class="box">Scroll Down</div>
<div class="box">Scroll Down</div>
<div class="box">Scroll Down</div>
<div class="box">Scroll Down</div>
</div>
</body>
</html>3. z-index와 함께 사용하기
position 값이 static이 아닌 요소는 z-index로 쌓임 순서를 제어할 수 있습니다.
.layer-1 {
position: relative;
z-index: 1;
}
.layer-2 {
position: absolute;
z-index: 100;
}
4. 실제 활용 예시: 모달 팝업
<div class="modal-overlay">
<div class="modal-content">
<h3>안내사항</h3>
<p>내용이 들어가는 영역입니다.</p>
</div>
</div>
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 999;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 8px;
}
5. 주의사항
- absolute 사용 시 부모 요소에 position: relative 지정 필수
- fixed는 스크롤 시 화면에 고정되므로 레이아웃에 영향
- sticky는 반드시 스크롤 컨테이너 내에 있어야 함
- z-index는 같은 position 그룹 내에서만 비교
마무리
- relative: 미세 조정 시 사용
- absolute: 완전한 자유 위치 지정
- fixed: 화면 고정 요소 (헤더/사이드바)
- sticky: 스크롤 시 특정 구간 고정
CSS 위치 속성을 익히면 복잡한 레이아웃도 손쉽게 구현할 수 있습니다