position: absolute; 속성은 요소를 가장 가까운 위치 지정(positioned) 조상 요소를 기준으로 배치할 수 있도록 해주는 CSS 포지셔닝 방식입니다.
position: absolute의 핵심 개념
position: absolute가 적용된 요소는 일반 문서 흐름(normal flow)에서 벗어나며, 주변 요소들은 마치 해당 요소가 존재하지 않는 것처럼 배치됩니다. 즉, 절대 위치 요소는 레이아웃상의 공간을 차지하지 않습니다.
- 기준점은 조상 요소 중 position 값이 relative, absolute, fixed, sticky로 설정된 가장 가까운 요소입니다.
- 위치 지정된 조상이 전혀 없다면 초기 컨테이닝 블록(일반적으로 문서 전체)을 기준으로 배치됩니다.
- top, right, bottom, left 속성을 함께 사용하면 정확한 위치를 세밀하게 지정할 수 있습니다.
예제
다음 코드를 실행하면 position: absolute;의 실제 동작을 직접 확인할 수 있습니다. 바깥쪽 div는 position: relative로 설정되어 기준점 역할을 하며, 안쪽 div는 이 부모를 기준으로 오른쪽 끝에서 70px 아래에 절대 위치로 배치됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div.one {
position: relative;
width: 500px;
height: 150px;
border: 2px solid blue;
}
div.two {
position: absolute;
top: 70px;
right: 0;
width: 300px;
height: 50px;
border: 2px solid yellow;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
position: absolute; 속성은 가장 가까운 위치 지정 조상을 기준으로 요소를 배치합니다.
<div class = "one">div에 position: relative 적용
<div class = "two">div에 position: absolute 적용</div>
</div>
</body>
</html>활용 팁
position: absolute는 툴팁, 드롭다운 메뉴, 이미지 위 배지, 오버레이처럼 다른 콘텐츠 위에 겹쳐지는 UI 요소를 만들 때 특히 유용합니다. 부모 요소에 position: relative를 지정하고 자식 요소를 absolute로 배치하는 패턴만 익혀두면, 복잡한 레이아웃도 자유롭게 구성할 수 있습니다.