CSS에서 요소의 위치를 제어하려면 position 속성을 사용합니다. 대표적인 위치 지정 방식으로는 상대 위치(relative), 절대 위치(absolute), 고정 위치(fixed)가 있으며, 각 방식은 기준점과 동작 방식이 서로 다릅니다. 이 글에서는 세 가지 방식의 개념과 실제 동작 예제를 통해 차이점을 자세히 살펴보겠습니다.
1. 상대 위치 지정 (Relative Positioning)
position: relative;는 요소를 자신의 원래 위치(일반적인 문서 흐름상의 위치)를 기준으로 이동시키는 방식입니다. left, right, top, bottom 속성을 함께 사용하면 원래 자리에서 지정한 만큼 떨어져 표시됩니다.
중요한 점은 요소가 이동하더라도 원래 차지하던 공간은 그대로 유지된다는 것입니다. 따라서 주변 요소의 배치에는 영향을 주지 않습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
position: relative;
color: white;
background-color: orange;
border: 2px dashed blue;
left: 50px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text.</p>
<p>This is demo text.</p>
<div class="demo">
position: relative;
</div>
<p>This is another demo text.</p>
</body>
</html>
실행 결과
위 예제에서 div.demo 요소는 원래 위치에서 오른쪽으로 50px 이동하여 표시됩니다.
2. 절대 위치 지정 (Absolute Positioning)
position: absolute;는 요소를 가장 가까운 위치 지정(positioend) 조상 요소를 기준으로 배치하는 방식입니다. 만약 위치 지정된 조상 요소가 없다면, 초기 컨테이닝 블록(문서 전체)을 기준으로 삼습니다.
절대 위치로 지정된 요소는 일반 문서 흐름에서 벗어나기 때문에 주변 요소들이 그 공간을 채우게 되며, 다른 콘텐츠와 겹쳐서 표시될 수 있습니다.
예제 코드
<!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>Demo Heading</h2>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<div class="demo1">position: relative;
<div class="demo2">
position: absolute;
</div>
</div>
<p>This is another demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
</body>
</html>
실행 결과
위 예제에서 demo2 요소는 relative로 설정된 부모 요소 demo1을 기준으로 위쪽에서 50px, 오른쪽 끝에 맞춰 배치됩니다. 이처럼 absolute 요소의 기준점을 만들어 주기 위해 부모에 position: relative;를 지정하는 패턴이 실무에서 널리 사용됩니다.
3. 고정 위치 지정 (Fixed Positioning)
position: fixed;는 요소를 브라우저 뷰포트(화면)를 기준으로 고정하는 방식입니다. 페이지를 스크롤해도 요소는 항상 같은 화면 위치에 머무릅니다. 상단 내비게이션 바, 플로팅 버튼, 고정 광고 영역 등을 구현할 때 유용하게 활용됩니다.
예제 코드
<!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;
}
div.demo3 {
position: fixed;
bottom: 0;
right: 20px;
width: 500px;
border: 3px solid orange;
color: blue;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<div class="demo1">position: relative;
<div class="demo2">
position: absolute;
</div>
<div class="demo3">
position: fixed;
</div>
</div>
<p>This is another demo text.</p>
</body>
</html>
실행 결과
위 예제에서 demo3 요소는 화면 오른쪽 하단에 고정되며, 페이지를 스크롤해도 항상 같은 위치에 표시됩니다.
참고: static과 sticky
이 외에도 CSS에는 두 가지 위치 값이 더 있습니다. 기본값인 static은 별도의 위치 지정 없이 일반 문서 흐름을 따르며, sticky는 스크롤 위치에 따라 relative처럼 동작하다가 지정된 임계점에 도달하면 fixed처럼 화면에 고정되는 하이브리드 방식입니다. 상황에 맞는 값을 선택하면 더욱 유연한 레이아웃을 구성할 수 있습니다.