CSS 고정 위치(Fixed Positioning)란?
고정 위치(fixed positioning)를 사용하면 스크롤과 관계없이 요소를 화면의 특정 위치에 고정할 수 있습니다. 즉, 사용자가 페이지를 위아래로 스크롤해도 해당 요소는 항상 같은 자리에 머무릅니다.
이때 지정하는 좌표는 HTML 문서가 아닌 브라우저 창(뷰포트)을 기준으로 계산된다는 점이 중요합니다.
top과 left 값으로 요소 이동하기
position 속성과 함께 top, left 두 값을 조합하면 HTML 문서 내 원하는 어느 곳으로든 요소를 자유롭게 배치할 수 있습니다.
- 왼쪽으로 이동 —
left속성에 음수 값을 지정합니다. - 오른쪽으로 이동 —
left속성에 양수 값을 지정합니다. - 위쪽으로 이동 —
top속성에 음수 값을 지정합니다. - 아래쪽으로 이동 —
top속성에 양수 값을 지정합니다.
실습 예제
아래 코드를 실행하면 고정 위치가 적용된 요소를 직접 확인할 수 있습니다. 페이지를 스크롤해 보면 파란색 박스가 항상 같은 위치에 머무는 것을 볼 수 있습니다.
<html> <head> </head> <body> <div style = "position:fixed; left:80px; top:20px; background-color:blue;color:white;"> 이 div는 고정 위치(fixed positioning)가 적용되어 있습니다. </div> </body> </html>