🌱 기초 프론트엔드
CSS에서 fixed란?
쉽게 이해하기
스마트폰 화면을 위아래로 스크롤해도 상단의 시계나 배터리 표시는 항상 같은 자리에 있잖아요. fixed는 바로 그런 '화면에 붙어있는' 느낌이에요.
핵심 정리
스크롤해도 항상 같은 위치에 고정되는 요소를 만들어요.
자세히 알아보기
position: fixed는 요소를 뷰포트(브라우저 창)를 기준으로 고정시키는 속성이에요. 스크롤을 아무리 해도 항상 화면의 같은 위치에 머물러 있어요. absolute와 비슷하지만, absolute는 부모 요소 기준이고 fixed는 항상 브라우저 창 기준이라는 게 큰 차이예요.
top, right, bottom, left로 브라우저 창의 어디에 고정할지 정해요. 예를 들어 top: 0; left: 0;이면 화면 좌측 상단에, bottom: 20px; right: 20px;이면 우측 하단 모서리에서 20px 떨어진 곳에 고정돼요.
실무에서는 상단 고정 네비게이션 바, 채팅 버튼, '맨 위로 가기' 버튼, 쿠키 동의 배너 등을 만들 때 필수로 써요. 예를 들어 쇼핑몰 사이트에서 스크롤을 내려도 상단 메뉴가 계속 보이게 하려면 header { position: fixed; top: 0; width: 100%; }처럼 설정하면 돼요.
주의할 점은 fixed 요소도 문서 흐름에서 빠지기 때문에, 다른 콘텐츠가 그 밑에 숨을 수 있어요. 상단 고정 메뉴를 만들었다면 body에 padding-top을 줘서 콘텐츠가 메뉴에 가려지지 않게 해야 해요. 또 모바일에서는 화면이 작아서 fixed 요소가 너무 많으면 콘텐츠 공간이 부족할 수 있으니 신중하게 사용해야 해요.