position: fixed; 속성은 요소를 뷰포트(viewport)를 기준으로 배치할 수 있게 해주는 CSS 위치 지정 방식입니다. 이 속성이 적용된 요소는 페이지를 스크롤하더라도 화면상의 같은 위치에 그대로 고정되어 유지됩니다.
position: fixed의 주요 특징
- 요소가 일반 문서 흐름(document flow)에서 제거되어 다른 콘텐츠와 겹쳐 표시될 수 있습니다.
- 스크롤 여부와 관계없이 항상 화면의 동일한 위치에 나타납니다.
top,bottom,left,right속성과 함께 사용하여 원하는 위치에 자유롭게 배치할 수 있습니다.
예제
다음 코드를 직접 실행하여 CSS position: fixed의 동작을 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
div{
position: fixed;
bottom: 0;
right: 0;
width: 200px;
border: 3px solid blue;
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
<p>position: fixed; 속성을 사용하면 요소를 뷰포트를 기준으로 배치할 수 있습니다.</p>
<div>
div has position: fixed;
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 파란색 테두리를 가진 div 요소가 화면 오른쪽 하단에 고정되어 나타납니다. 페이지를 아무리 스크롤해도 해당 요소는 항상 뷰포트의 우측 하단 위치에 그대로 유지되는 것을 확인할 수 있습니다.
활용 사례
position: fixed는 상단 고정 내비게이션 바(GNB), 하단 광고 배너, '맨 위로' 버튼, 실시간 채팅 위젯처럼 스크롤과 관계없이 항상 화면에 노출되어야 하는 UI 요소를 구현할 때 널리 활용됩니다.