position: sticky; 🆚 position:fixed;

YEJI·2022년 4월 13일

멋쟁이사자처럼📕

목록 보기

9/13

position 이란?

웹 페이지에서 html 태그나 id, class 박스 등의 위치를 지정해주는 속성.
position을 이용해 페이지의 레이아웃을 결정할 수 있음.

기본값인 static을 제외한 값들은 top, right, bottom, left 값에 따라 위치 지정

1. position: sticky;?

요소를 일반적인 문서 흐름에 따라 배치 (공간 차지)

가장 가까운 스크롤되는 조상과 컨테이닝 블록(가장 가까운 블록 레벨 조상)을 기준으로 삼음

오프셋은 다른 요소의 위치에 영향을 주지 않음

항상 새로운 쌓임 맥락을 생성

스크롤 동작이 존재하는 가장 가까운 조상에 달라 붙음

1-1. 예제

이런식으로 스크롤을 내려도 상단에 고정되어 노출됨

2. position: fixed;?

요소를 일반적인 문서의 흐름에서 제거 (공간 차지하지 않음)

뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치
(단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼음)

스크롤을 올리거나 내릴 때 특정 박스가 고정되어 움직이지 않았으면 한다면 fixed를 사용!

스크롤 되어도 중요한 정보를 화면에 계속 노출해주기 위해 사용
ex. 네비게이션