담음 블록과 위치 지정 확인

문항 6개. 정답과 해설은 풀어 본 뒤에 보여 드립니다.

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

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

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

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

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

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

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

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

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

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

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

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