겹친 요소의 쌓임 순서와 stacking context를 이해합니다.
z-index는 position된 요소나 flex/grid item 등에 적용되며 값이 크다고 항상 전체 페이지의 맨 위가 되는 것은 아닙니다. 부모가 만든 stacking context 안에서만 비교될 수 있습니다.
두 상자는 .target에서 position: absolute와 180×110 크기를 함께 받고, .second는 위치만 오른쪽으로 100px, 아래로 50px 옮겨 일부가 겹칩니다. 문서 순서대로라면 나중에 나온 두 번째 상자가 위에 그려지지만, z-index가 2인 대상 요소가 1인 두 번째 상자보다 높아 겹친 부분에서는 초록 상자가 노란 상자를 덮습니다.
z-index를 쓰지 않아도 opacity가 1보다 작거나 transform, filter가 있는 요소는 새 stacking context를 만듭니다. 컴포넌트 안의 z-index가 페이지의 다른 요소와 경쟁하지 않게 가두고 싶다면, 다른 시각 효과 없이 stacking context만 만드는 isolation: isolate를 컴포넌트 바깥 요소에 줍니다.
z-index 값을 무작정 수천 단위로 높이기보다 어떤 부모가 stacking context를 만드는지 확인하세요.
직접 바꿔보세요두 요소의 z-index를 서로 바꿔보세요.