CSS 절대 위치 지정(Absolute Positioning)이란?
웹 페이지에서 요소의 위치를 정밀하게 제어하고 싶다면 CSS의 절대 위치 지정을 활용할 수 있습니다. position: absolute 속성이 적용된 요소는 가장 가까운 위치 지정 조상 요소를 기준으로, 조상이 없다면 문서의 왼쪽 상단 모서리를 기준으로 지정된 좌표에 배치됩니다.
position 속성과 함께 top과 left 값을 조합하면 HTML 문서 안에서 요소를 원하는 어떤 위치로든 자유롭게 이동시킬 수 있습니다.
이동 방향별 값 설정
- 왼쪽으로 이동 —
left에 음수 값을 사용합니다. - 오른쪽으로 이동 —
left에 양수 값을 사용합니다. - 위로 이동 —
top에 음수 값을 사용합니다. - 아래로 이동 —
top에 양수 값을 사용합니다.
예제 코드
아래 코드를 실행하면 절대 위치 지정이 실제로 어떻게 동작하는지 직접 확인할 수 있습니다.
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>동작 방식 살펴보기
위 예제에서 div 요소는 문서 기준으로 왼쪽에서 80px, 위쪽에서 20px 떨어진 위치에 노란색 배경과 함께 표시됩니다.
한 가지 주의할 점은, 절대 위치가 지정된 요소는 일반적인 문서 흐름(normal flow)에서 벗어난다는 것입니다. 따라서 주변의 다른 요소들과 겹쳐 보일 수 있으므로, 레이어 구조나 팝업, 툴팁 등을 만들 때는 이 특성을 고려해 배치해야 합니다.