Containing Block and Positioning Check

카드에 transform: translateY(-2px) 를 넣었더니 그 안의 position: fixed 덮개가 카드 안에만 깔립니다. 왜입니까?

• transform 이 자식의 position 값을 absolute 로 바꾸기 때문이다
• transform 이 있는 조상이 fixed 의 새 담음 블록이 되기 때문이다
• fixed 는 원래 가장 가까운 블록 조상을 기준으로 재기 때문이다
• transform 과 fixed 는 함께 쓸 수 없어 fixed 가 무시되기 때문이다

position: sticky 만 쓰고 top·right·bottom·left 를 하나도 주지 않으면?

• 기본값 0 이 적용되어 화면 맨 위에 붙는다
• 브라우저 콘솔에 경고가 찍히고 static 으로 되돌아간다
• 붙을 선이 없어 그냥 흘러가고 오류도 경고도 없다
• 부모 상자의 가운데에 붙는다

가로 넘침을 막으려고 중간 컨테이너에 overflow-x: hidden 을 넣었더니 그 안의 sticky 가 안 붙습니다. 이유는?

• overflow 가 sticky 요소의 위치 계산을 통째로 끄기 때문이다
• hidden 인 조상 안에서는 top 값이 무시되기 때문이다
• sticky 는 overflow 가 있는 조상 안에서 쓸 수 없기 때문이다
• 그 상자가 스크롤 상자가 되는데 사용자는 그것을 스크롤하지 않기 때문이다

z-index: 9999 인데도 뒤에 깔립니다. 가장 가능성이 높은 원인은?

• 조상 중 하나가 쌓임 맥락을 만들어 그 안에 갇혀 있다
• z-index 의 최대값이 1000 이라 9999 가 잘린 것이다
• position 이 relative 이면 z-index 가 적용되지 않는다
• 형제 요소의 z-index 가 음수라 계산이 뒤집힌 것이다

position: absolute 인 요소에 위치 지정된 조상이 하나도 없으면 무엇을 기준으로 잽니까?

• 가장 가까운 블록 부모의 content 영역
• 초기 담음 블록 — 사실상 문서 전체 기준이 된다
• body 요소의 padding 영역
• 가장 가까운 flex 나 grid 컨테이너

position: sticky 인 요소가 조금 따라오다 마는 이유로 가장 흔한 것은?

• top 값이 너무 작아서 금방 한계에 닿기 때문이다
• z-index 가 없어 다른 요소에 가려지기 때문이다
• 붙는 범위가 부모 상자 안으로 제한되기 때문이다
• 브라우저가 스크롤 성능을 위해 중간에 해제하기 때문이다