안 붙는 이유를 조상에서 찾는다

목표

담음 블록·스크롤 상자·쌓임 맥락을 조상을 따라 올라가며 직접 계산합니다.
브라우저는 없지만 이 셋은 마크업과 CSS 만으로 답이 정해집니다.

왜 중요한가

fixed 가 안 붙고 sticky 가 안 따라다니는 버그는 증상이 원인을 전혀
가리키지 않습니다. 그 요소의 CSS 는 완벽하게 맞고, 개발자 도구로 그 요소만
보면 아무 문제가 없습니다. 볼 곳은 조상입니다.

조상에 transform 이 하나 있으면 fixed 의 기준이 뷰포트에서 그 조상으로
바뀝니다. 조상에 overflow: hidden 이 하나 있으면 그 상자가 스크롤 상자가
되어 sticky 가 붙을 일이 없어집니다. 카드 호버 효과와 모달은 아무 관계가
없어 보이므로, 규칙을 모르면 원인을 찾기까지 몇 시간이 갑니다.

이 실습의 문서

채점기와 계산기가 아래 구조를 가정합니다. HTML 은 쓰지 않습니다.

div.page├ header.topbar└ div.shell  ├ aside.side  │ └ nav.toc  └ main.content    └ div.card      ├ span.badge      └ div.overlay

만들 것

/root/work/pos/layout.css 하나입니다.

계산기

cd /root/work/pospython3 /opt/lab/checks/css-pos-lab/boxes.py layout.csspython3 /opt/lab/checks/css-pos-lab/boxes.py layout.css 500

요소마다 position · 담음 블록 · sticky 판정 · z-index 범위를 찍습니다.
두 번째 인자로 화면 폭을 주면 그 폭에서 다시 계산합니다.

단계

1. .badge 를 .card 기준으로 (절대 위치의 담음 블록)
2. .overlay 를 뷰포트 기준으로 (fixed 의 기본 담음 블록)
3. transform 을 어디에 두느냐 — fixed 가 갇히는 함정
4. .topbar 를 sticky 로 (임계값)
5. .toc 가 실제로 붙게 (스크롤 상자 고르기)
6. z-index 가 루트에서 겨루게 (쌓임 맥락)
7. 계산기 결과를 07-boxes.txt 로
8. 좁은 화면에서는 목차를 흐름으로 (순서 함정 다시)
9. 정리 → 09-notes.md

참고

• 3단계는 먼저 .card 에 transform 을 넣고 계산기를 돌려 **갇히는 것을 직접

본 뒤**, 그 속성을 .badge 로 옮기세요.

• inset: 0 한 줄은 네 방향을 모두 0 으로 둔다는 뜻입니다.
• 붙는 구간의 길이는 부모 상자의 높이에 달려 있어 계산기로는 알 수

없습니다. 그건 브라우저에서 봐야 합니다.

단계 9개

1. 절대 위치의 기준을 만든다
2. 덮개를 뷰포트에 고정한다
3. transform 을 어디에 두는가
4. 머리띠를 붙인다
5. 스크롤 상자를 고른다
6. z-index 가 통하는 범위
7. 계산기로 확인한다
8. 좁은 화면에서는 흐름으로
9. 진단 순서를 적어 둔다