CSS의 position: relative와 position: absolute의 차이점을 자세히 설명드리겠습니다.
position: relative
기본 개념:
- 요소가 원래 위치를 기준으로 이동
- 원래 자리는 그대로 차지하고 있음 (다른 요소들이 밀려나지 않음)
- 문서 흐름(document flow)에 그대로 참여
특징:
.relative-box {
position: relative;
top: 20px; /* 원래 위치에서 아래로 20px */
left: 30px; /* 원래 위치에서 오른쪽으로 30px */
}
- 다른 요소들은 이 요소가 원래 자리에 있다고 생각
- 시각적으로만 이동하고, 레이아웃에는 영향 없음
- 자식 요소의 absolute positioning 기준점 역할
position: absolute
기본 개념:
- 가장 가까운 positioned 부모(relative, absolute, fixed)를 기준으로 위치 결정
- 원래 자리에서 완전히 빠져나옴 (다른 요소들이 그 자리를 채움)
- 문서 흐름에서 제외됨
특징:
.absolute-box {
position: absolute;
top: 20px; /* 부모 기준 위에서 20px */
left: 30px; /* 부모 기준 왼쪽에서 30px */
}
- 다른 요소들은 이 요소가 존재하지 않는다고 생각
- 부모가 positioned가 아니면 <body> 기준으로 위치
- 레이아웃에서 완전히 분리됨
실제 예시
HTML:
<div class="container">
<div class="box1">Box 1</div>
<div class="box2 relative">Box 2 (relative)</div>
<div class="box3">Box 3</div>
</div>
<div class="container">
<div class="box1">Box 1</div>
<div class="box2 absolute">Box 2 (absolute)</div>
<div class="box3">Box 3</div>
</div>
CSS:
.relative {
position: relative;
top: 20px;
left: 20px;
background: red;
}
.absolute {
position: absolute;
top: 20px;
left: 20px;
background: blue;
}
결과:
- relative: Box 2가 이동해도 Box 3는 원래 자리에 그대로
- absolute: Box 2가 사라진 것처럼 되어 Box 1과 Box 3가 붙어버림
주요 사용 사례
position: relative
- 약간의 위치 조정이 필요할 때
- absolute 요소의 부모 컨테이너로 사용
- 애니메이션에서 원래 위치 기준 이동
position: absolute
- 드롭다운 메뉴
- 툴팁, 모달창
- 오버레이 요소
- 정확한 좌표에 요소 배치
핵심 차이점 요약
구분 relative absolute
| 기준점 | 자신의 원래 위치 | 부모 요소 |
| 공간 차지 | 원래 자리 유지 | 자리에서 빠짐 |
| 문서 흐름 | 참여함 | 제외됨 |
| 다른 요소 영향 | 없음 | 레이아웃 변경됨 |
이런 차이점 때문에 보통 relative는 부모 컨테이너에, absolute는 자식 요소에 많이 사용합니다.
<div class = "container"> <div class = "box1"> box 1 </div> <div class = "box2 relative"> kasten 2 (relativ) </div> <div class = "box3"> box 3 </div> </div> <div class = "container"> <div class = "box1"> box 1 </div> <div class = "box2 Absolute"> Box 2 (Absolute) </div> <div class = "box3"> box 3 </div> </div>
'프로그래머로의 여정' 카테고리의 다른 글
| 유틸리티 클래스(Utility Classes)란 (1) | 2025.09.01 |
|---|---|
| CSS로 텍스트 줄 수 제한하기 (한줄, 두줄, 세줄 효과) (0) | 2025.08.31 |
| position: absolute;가 꼭 필요한 이유 (1) | 2025.08.29 |
| CSS에서 text-align: center와 margin: 0 auto (0) | 2025.08.28 |
| <a>와 <link> in html (0) | 2025.08.26 |