fixed와 sticky는 정말 비슷하지만, 중요한 차이점들이 존재합니다.
sticky와 fixed의 차이점
position: fixed는 viewport에 고정되어 있다는 뜻으로 스크롤을 내려도 지정한 위치에 고정되어 있습니다. 스크롤을 내리면 문서에서 물흐르듯 벗어납니다.
하지만, viewport에 고정되지 않는 엣지케이스들도 존재합니다. MDN에서 이 부분은 참고할 수 있습니다.
sticky는 스크롤을 내려도 스크롤을 따라 움직이며 내가 정한 offset에 도달하면 그 순간부터 fixed처럼 행동합니다. 즉, 그 위치에 고정됩니다.
하지만 한가지 문제가 존재하는데, 그것은 포함하는 block(부모) 내에 있어야 합니다. 포함하는 블럭, 즉 부모 엘리먼트가 스크롤을 벗어나면, 그와 함께 사라집니다.
fixed는 몇가지의 문제점을 만들 수 있지만, 어떻게 사용하는 지를 잘 안다면 잘 사용할 수 있습니다.
fixed를 사용해야 할 때
fixed는 페이지에서 같은 위치에 항상 존재해야할 때 사용하면 됩니다. 심플하게 말하자면 fixed를 사용한 엘리먼트는 움직이지 않습니다.
하지만 fixed를 사용할 때에는 조심해야 합니다. fixed를 사용하면 document flow에서 그 엘리먼트를 벗어나게 하기 때문입니다.
해당 페이지의 방문자는 해당 페이지를 볼 수 있지만, 페이지의 나머지 내용에 관한 한 해당 페이지는 존재하지 않습니다.
그리고 고정된 엘리먼트가 다른 엘리먼트들을 가릴 수도 있고, 데스크탑에서는 괜찮아도, 모바일이나 실제 화면에서는 문제를 일으킬 수 있다는 점을 조심해야 합니다.
언제 sticky를 써야할까
sticky는 무엇인가 스크롤을 해서도 볼 수 있고, 어떠한 포인트에 도달했을 때는 멈추길 바랄 때 사용하면 됩니다. 예전에는 자바스크립트로 이를 구현했지만, 이제는 CSS를 사용해서 간단하게 사용할 수 있습니다.
부모 엘리먼트 내에 존재해야한다는 점을 기억하세요. 부모 엘리먼트가 스크롤에서 벗어나면, 해당 엘리먼트도 사라집니다. 부모 엘리먼트가 body라면 이 점은 이슈가 되지 않지만, 그 이외에는 원했던 효과가 나오지 않을 수도 있습니다.
MDN에서의 정의
fixed
엘리먼트를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에서 엘리먼트를 위한 공간도 생성하지 않습니다. 대신 viewport의 초기 컨테이닝 블록을 기준으로 배치합니다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 viewport 대신 그 조상을 컨테이닝 블록으로 삼습니다. 문서를 인쇄한다면, 해당 요소가 모든 페이지의 같은 위치에 출력됩니다. 이 엘리먼트의 최종 위치는 top, right, bottom 그리고 left의 값에 의해 결정됩니다.
sticky
엘리먼트를 일반적인 문서 흐름에 따라 배치하고, table 관련 엘리먼트를 포함 가장 가까운 스크롤이 가능한 조상과, 컨테이닝 블록(가장 가까운 블록 레벨 조상)을 기준으로 top, right, bottom, left의 값에 따라 offset을 적용합니다. offset은 다른 엘리먼트에는 영향을 주지 않습니다.
sticky는 가장 가까운 조상이 정말 스크롤이 가능한 조상이 아니더라도, "스크롤 동작" (overflow가 hidden, scroll, auto, overlay일 때)이 존재하는 가장 가까운 조상에 "stick"한다는 점을 알아두세요.
sticky를 사용할 때 위치 지정이 의도한 대로 동작하게 하려면 top, right, bottom, left 중 적어도 하나의 임계값을 설정해야 합니다. 임계값을 설정하지 않으면 상대 위치 지정과 다를 바가 없습니다.
성능 및 접근성 문제
fixed나 sticky를 포함하는 스크롤 엘리먼트는 성능 및 접근성 문제를 유발할 수 있습니다. 브라우저는 사용자가 스크롤을 할 때마다 sticky, fixed 요소를 새로운 위치에 repaint 해야 하는데, 표시해야 되는 내용의 양, 브라우저 및 기기의 성능에 따라 60 fps를 유지하지 못해 일부 민감한 사용자에게는 접근성 문제를 야기하고, 또한 사용자 경험 악화도 생길 수 있습니다. 이 문제의 해결책 중 하나는 will-change: transform을 추가하여 요소를 자신만의 레이어에서 렌더링 하여 repaint 속도를 향상하고, 나아가 성능과 접근성을 높일 수 있습니다.
Reference
https://www.kevinpowell.co/article/positition-fixed-vs-sticky/
Position fixed vs position sticky | Position fixed vs position sticky
A look at the similarities and differences between CSS's position fixed and sticky, as well as when you might use one over the other
www.kevinpowell.co
https://developer.mozilla.org/en-US/docs/Web/CSS/position#values
position - CSS: Cascading Style Sheets | MDN
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
developer.mozilla.org
'HTML_CSS > 기초' 카테고리의 다른 글
| margin 과 padding (0) | 2022.03.03 |
|---|---|
| TIL CSS 레이아웃/셀렉터 정리 (2) | 2021.07.01 |
| HTML5 template 태그 (0) | 2021.06.29 |
| CSS 선택자(Selector) (0) | 2021.06.28 |
| Relative length units (0) | 2021.06.24 |
