position: sticky의 복잡한 동작 원리: 이중 동작 방식: • 1단계: 일반적인 문서 흐름을 따라 배치 (relative처럼) • 2단계: 스크롤로 임계점에 도달하면 고정 (fixed처럼) 구체적인 동작 과정: 1. 초기 상태: 문서 흐름에 따라 자연스럽게 배치 2. 스크롤 중: 요소가 뷰포트 상단으로 올라감 3. 임계점 도달: 뷰포트 상단에서 20px 지점에 도달 4. 고정 상태: 더 이상 올라가지 않고 그 자리에 "달라붙음" 실무 활용 사례: • 테이블 헤더: 스크롤해도 항목명이 항상 보임 • 내비게이션: 일정 스크롤 후 상단에 고정 • 사이드바 메뉴: 스크롤 중 특정 위치에서 고정 다른 position과의 차이점: • fixed: 처음부터 고정 위치 • relative: 이동 후에도 고정되지 않음 • sticky: 조건부 고정 (스크롤 위치에 따라) 필수 조건: • top, bottom, left, right 중 최소 하나는 반드시 설정 • 부모 컨테이너에 overflow: hidden이 있으면 작동 안 함