position에서 fixed와 sticky 차이

🏷️ fixed VS sticky

fixed 🔩

• 눈에 보이는 뷰포트를 기준으로 top, right, bottom, left 값에 따라 최종 위치를 지정한다.
• 스크롤을 하더라도 계속 따라온다.
• 아래에 어떤 내용이 있더라도 가리면서 따라온다.
• 예) 팝업창, 문의하기 버튼, 네비게이션 바, 광고창 등

sticky 🔖

• Normal Flow를 따르고, 가장 가까운 스크롤이 되는 부모를 기준으로 top, right, bottom, left 값에 따라 최종 위치를 지정한다. (기본적으로 스크롤이 되는 상황에서만 효과가 나타남)
• Normal Flow를 따르기 때문에 처음에는 자신의 영역을 차지하고 있다.
• sticky라는 이름을 기억하면 이해하기가 쉽다. 스크롤을 내리다가 특정 시점부터 마치 fixed처럼 동작한다.

참고로 fixed는 top 50px, right 50px를 주었고 sticky는 top 50px만 주었다.