자식의 숫자보다 부모의 층을 확인하세요

두 실험은 자식 배지의 z-index가 같습니다. 수정에서는 부모 A의 층만 바꿉니다.

1. 실패: 부모 A 1, 부모 B 2

겹치는 부분에서 B가 배지보다 위에 보입니다.

2. 수정: 부모 A 3, 부모 B 2

A의 부모 층을 3으로 올리면 그 안의 배지도 B 위에 나타납니다.

3. 숫자를 비교하는 범위

현재 실습의 층 구조
요소 실패 수정
부모 A 1 3
A 안의 배지 10 10
부모 B 2 2

배지 10과 B 2를 직접 비교하지 않습니다. 먼저 같은 단계에 있는 A와 B를 비교합니다.

4. 개발자 도구 실험

  1. 수정 영역의 .panel-a에서 z-index: 3을 끄세요.
  2. 배지가 다시 B 아래로 들어가는지 확인하세요.
  3. 규칙을 되살린 뒤 부모 A 전체가 위로 이동한다는 점을 확인하세요.

이 그림은 층 비교 실험입니다. 실제 메뉴나 대화상자의 키보드 동작을 구현한 예제는 아닙니다.