한 줄 요약
position이 마음대로 안 될 때는 원인이 대부분 정해져 있습니다. 점검표 순서대로 하나씩 확인하세요.
비유로 이해하기
자동차 시동이 안 걸리면 정비사는 아무 데나 뜯지 않고 점검표 순서대로 확인합니다. 배터리, 연료, 기어 위치. position 문제도 마찬가지로 몇 가지 단골 원인만 확인하면 대부분 해결됩니다.
점검표
- 1. top 같은 기준선을 적었나요? sticky와 absolute는 top·bottom·left·right 중 하나가 있어야 의도대로 움직입니다.
- 2. 부모에 overflow: hidden이 있나요? 조상 중 하나라도 overflow가 hidden·auto면 sticky가 그 안에 갇힙니다.
- 3. 부모 상자가 충분히 긴가요? sticky는 부모 안에서만 따라옵니다. 부모가 짧으면 붙을 틈이 없어요.
- 4. absolute의 기준 상자가 맞나요? 부모에 position: relative(말뚝)가 있는지 확인하세요.
- 5. z-index가 안 먹나요? position이 static인지, 다른 ‘묶음’ 안에 갇혀 있는지 확인하세요.
직접 실행해 보기
아래 사이드바는 sticky를 줬는데 붙지 않습니다. 결과 창을 스크롤해 확인한 뒤, 점검표 2번 원인인 .wrap의 overflow: hidden;을 지워 보세요. 그러면 사이드바가 붙어서 따라옵니다.
GenerateBlocks에서는
GenerateBlocks에서 sticky를 설정했는데 안 붙는다면, 바깥 컨테이너들의 Overflow 설정과 Grid의 정렬(Align Items가 stretch면 사이드바가 부모만큼 늘어나 붙을 틈이 없음)을 먼저 확인하세요. 독립학교 홈의 sticky 제목도 Align Items를 start로 두었습니다.
참고: Ahmad Shadeed: Using Position Sticky With CSS Grid · MDN: position · Josh W. Comeau: What The Heck, z-index??