[CSS] position: fixed란

position: fixed는 요소를 뷰포트(Viewport, 화면, 브라우저) 기준으로 고정시키는 속성이다.
스크롤을 해도 항상 같은 위치에 머문다는 점이 가장 큰 특징이다.

 

1. 기준은 항상 화면(Viewport)

.box {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

• top / right / bottom / left의 기준은 부모 요소가 아니라 화면(브라우)
• 스크롤을 내려도 위치가 변하지 않는다

absolute와 달리 relative 조상의 영향을 전혀 받지 않는다

 

2. 자주 쓰이는 활용 예  

• 상단 고정 네비게이션 바
• 우측 하단 “맨 위로” 버튼
• 플로팅 알림 / 고객센터 버튼

.header {
  position: fixed;
  top: 0;
  width: 100%;
}

 

 

3. 사용할 때 주의할 점

• 문서 흐름에서 완전히 빠지므로 아래 콘텐츠가 겹칠 수 있음
• 모바일 환경에서는 주소창, 하단바 등으로 보이는 위치가 달라질 수 있음

 

4. 정리하면

• position: fixed는 항상 화면 기준
• 스크롤해도 절대 움직이지 않음
• 네비게이션, 플로팅 버튼에 최