Layout - Positioning

오민영·2023년 2월 14일

absolute positioning relative static sticky

CSS

목록 보기

8/22

sticky

요소를 일반적인 문서 흐름에 따라 배치한다.

positon: sticky 속성을 적용한 요소는 평소 문서 안에서 positon: static 상태와 같이 일반적인 문서 흐름에 따라 배치해 있다가, 스크롤 위치가 임계점(내가 지정한 top / bottom / left / right 위치)에 이르면 position: fixed 와 같이 박스를 화면에 고정할 수 있는 속성이다.

https://codepen.io/ohmy0418/pen/NWvBwGP

특징

top / bottom / left / right 최소 1개 속성을 필수적으로 사용해야 한다.

fixed는 뷰포트에 고정되지만, sticky 박스는 scroll되는 박스 기준으로 고정된다. 즉, scroll 박스가 offset 기준이 된다.

뷰포트와 scoll 박스가 동일해보이지만, 뷰포토는 브라우저에 유일한 하나이고, scroll 박스는 div로 원하는 만큼 생성해서 영역을 잡을 수 있다.

sticky 박스를 scroll 박스에 고정하는 임계점은 스크롤 위치가 결정한다. sticky 박스 자신과 부모의 위치와 크기도 임계점에 영향을 미친다.

sticky 박스의 부모 박스가 scroll 박스를 벗어나면, sticky 박스는 다시 일반적인 흐름(static)에 따라 고정된다.

sticky 박스와 scroll 박스 사이에 overflow: hidden 속성을 적용한 박스가 끼어들면 sticky 박스는 일반적인 흐름(static)을 따른다.

sticky 박스의 부모 scroll 모드는 반드시 height가 설정되어 있어야 한다.

지원하는 브라우저에만 sticky를 적용하기

positon: sticky 을 지원하는 브라우저에만 스타일을 적용하려면, @support 규칙을 이용할 수 있다.

@supports (position: sticky) or (position: -webkit-sticky) {
    .sticky {
        position: -webkit-sticky; /* 사파리 브라우저 지원 */
        position: sticky;
        top: 4px;
        background: red;
    }
}