CSS 절대 위치란 무엇인가?
절대 위치 지정(absolute positioning)은 CSS에서 요소를 자유롭게 배치할 수 있게 해주는 강력한 기법입니다. position: absolute;가 적용된 요소는 일반 문서 흐름(normal flow)에서 완전히 벗어나며, 가장 가까운 위치 지정된(positioned) 조상 요소를 기준으로 배치됩니다.
여기서 '위치 지정된 조상'이란 position 속성값이 relative, absolute, fixed, 또는 sticky로 설정된 조상 요소를 의미합니다. 만약 위치 지정된 조상 요소가 존재하지 않으면, 요소는 최초 컨테이닝 블록, 즉 <html> 요소(문서 전체)를 기준으로 배치됩니다.
핵심 포인트 정리
- 절대 위치 요소는 문서 흐름에서 제거되므로, 주변 요소들이 마치 해당 요소가 없는 것처럼 배치됩니다.
top,right,bottom,left속성으로 기준점으로부터의 정확한 위치를 지정할 수 있습니다.- 일반적으로 부모 요소에
position: relative;를 설정하고, 그 안에position: absolute;인 자식 요소를 배치하는 패턴이 널리 사용됩니다.
예제 코드
아래 예제에서는 외부 <div>(demo1)에 position: relative;를 적용해 기준점 역할을 하도록 하고, 내부 <div>(demo2)에 position: absolute;를 적용했습니다. 내부 요소는 부모 요소를 기준으로 위쪽에서 50px, 오른쪽 끝에 맞춰 배치됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div.demo1 {
position: relative;
color: white;
background-color: orange;
border: 2px dashed blue;
width: 600px;
height: 200px;
}
div.demo2 {
position: absolute;
color: white;
background-color: orange;
border: 2px dashed blue;
top: 50px;
right: 0;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<h2>데모 제목</h2>
<p>이것은 데모 텍스트입니다.</p>
<p>이것은 데모 텍스트입니다.</p>
<p>이것은 데모 텍스트입니다.</p>
<p>이것은 데모 텍스트입니다.</p>
<div class="demo1">position: relative;
<div class="demo2">
position: absolute;
</div>
</div>
<p>이것은 다른 데모 텍스트입니다.</p>
<p>이것은 데모 텍스트입니다.</p>
<p>이것은 데모 텍스트입니다.</p>
</body>
</html>코드 설명
div.demo1 (부모 요소): position: relative;가 선언되어 있어 자식 요소의 배치 기준점이 됩니다. 너비 600px, 높이 200px로 지정되어 있습니다.
div.demo2 (자식 요소): position: absolute;가 선언되어 있으며, top: 50px;로 인해 부모 요소 상단에서 50px 아래로 내려가고, right: 0;으로 인해 부모 요소의 오른쪽 가장자리에 딱 붙어 배치됩니다.
실행 결과
위 코드를 실행하면 주황색 배경의 큰 박스(demo1) 안에 작은 박스(demo2)가 오른쪽 상단 영역에 겹쳐진 형태로 나타납니다. 이처럼 절대 위치 지정을 활용하면 특정 요소를 부모 요소 내부의 원하는 좌표에 정확히 배치할 수 있습니다.
마무리
절대 위치 지정은 드롭다운 메뉴, 툴팁, 모달 창, 배지(badge) 등 다양한 UI 요소를 구현할 때 필수적인 기술입니다. relative와 absolute의 관계를 잘 이해하고 활용하면 복잡한 레이아웃도 손쉽게 구성할 수 있습니다.