한 줄 요약
fixed는 페이지가 아니라 화면(브라우저 창)에 붙어서, 스크롤을 해도 같은 자리에 머뭅니다.
비유로 이해하기
모니터 테두리에 붙여 둔 포스트잇을 생각해 보세요. 화면 속 문서를 아무리 스크롤해도 포스트잇은 모니터에 붙어 있으니 같은 자리에 있습니다.
position: fixed는 기준이 화면(뷰포트)입니다. 그래서 채팅 상담 버튼, 맨 위로 가기 버튼, 하단 고정 신청 바처럼 항상 보여야 하는 요소에 씁니다.
비교해 보기
- absolute: 기준 상자(부모)에 붙음. 스크롤하면 부모와 함께 화면 밖으로 사라집니다.
- fixed: 화면에 붙음. 스크롤과 상관없이 항상 같은 자리.
- 주의: fixed 요소는 콘텐츠를 가릴 수 있어서, 모바일에서는 크기와 위치를 특히 신경 써야 합니다.
직접 실행해 보기
결과 창 안에서 마우스 휠로 스크롤해 보세요. 오른쪽 아래 상담 버튼은 따라오고, 글은 지나갑니다. bottom과 right 값을 바꾸거나, fixed를 absolute로 바꿔서 차이를 비교해 보세요.
GenerateBlocks에서는
GenerateBlocks에서 버튼을 감싼 컨테이너의 Position을 Fixed로 바꾸고 Bottom, Right 값을 주면 떠 있는 버튼이 됩니다. 사이트 전체에 띄우고 싶다면 GeneratePress의 Elements(훅)에 넣어 모든 페이지에 표시하는 방법을 씁니다.
참고: MDN: position · MDN: Positioning · CSS-Tricks: Absolute, Relative, Fixed Positioning