[CSS] position: fixed;와 position: sticky;

position: fixed; VS position: sticky;

position: fixed;

position: fixed;는

아무리 스크롤을 내려도

화면 상단에 고정돼 있다.

위치를 바꿔도

역시나 다른 컨텐츠를 배경 삼아

바뀐 위치에 그대로 동동 떠 있다.

마치 액정 위에 스티커를 붙여놓은 느낌.

---

position: sticky;

처음엔 static인 척 하다가

지정한 위치에 도달하면

fixed 행세를 한다.

근데 얜 방구석 여포라서

자기 나와바리에서만 나댈 수 있다.

이동에 제약이 없는 fixed와 달리 부모 품을 못 벗어난다.

---

결론

메인 내비게이션 바는 fixed를, 특정 영역 안에서만 움직이는 헤더는 sticky를 적용하는 게 좋다. 근데 어차피 sticky는 IE에서 못 쓰니까 웬만하면 fixed를 쓰자.

---

참고

position - CSS: Cascading Style Sheets | MDN