겹친 요소의 쌓임 순서와 stacking context를 이해합니다.
z-index는 position된 요소나 flex/grid item 등에 적용되며 값이 크다고 항상 전체 페이지의 맨 위가 되는 것은 아닙니다. 부모가 만든 stacking context 안에서만 비교될 수 있습니다.
이번 예제의 출발점은 position: relative; z-index: 2;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 두 요소의 z-index를 서로 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
z-index 값을 무작정 수천 단위로 높이기보다 어떤 부모가 stacking context를 만드는지 확인하세요.
직접 바꿔보세요두 요소의 z-index를 서로 바꿔보세요.