CSS에서 position: fixed;가 적용된 요소는 페이지를 스크롤하더라도 항상 같은 위치에 고정됩니다. 뷰포트(브라우저 화면)를 기준으로 배치되기 때문에 사용자가 페이지 어디로 이동하든 해당 요소는 화면 위에 그대로 남아 있습니다.
position: fixed의 특징
- 뷰포트 기준 배치: 부모 요소와 무관하게 브라우저 창을 기준으로 위치가 결정됩니다.
- 스크롤과 무관한 고정: 페이지가 아무리 길어도 요소는 항상 화면의 지정된 위치에 머물러 있습니다.
- 문서 흐름에서 제거: fixed 요소는 일반 문서 흐름에서 벗어나므로, 주변 콘텐츠가 그 공간을 채우게 됩니다.
- 활용 예시: 상단 고정 내비게이션 바, 하단 플로팅 버튼, '맨 위로' 이동 버튼, 고정 광고 배너 등에 널리 사용됩니다.
예제 코드
아래 예제는 relative, absolute, fixed 세 가지 포지셔닝을 함께 비교할 수 있도록 구성했습니다. demo3 클래스에 position: fixed;와 bottom: 0; right: 20px;를 지정하여, 화면 오른쪽 하단에 고정되는 요소를 만들었습니다.
<!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>
실행 결과
위 코드를 실행하고 페이지를 스크롤해 보면, demo1(relative)과 demo2(absolute) 요소는 문서와 함께 움직이지만, demo3(fixed) 요소는 화면 오른쪽 하단에 그대로 고정되어 있는 것을 확인할 수 있습니다.
참고 사항
fixed 요소는 top, bottom, left, right 속성으로 위치를 지정합니다. 이 값들을 모두 생략하면 원래 문서 흐름상의 자리에 고정됩니다. 또한 조상 요소 중 하나에 transform, filter, perspective 속성이 적용되어 있다면, fixed 요소는 뷰포트가 아닌 해당 조상 요소를 기준으로 배치된다는 점에 유의해야 합니다.