Z-색인 및 의사 요소: 사례 연구

CSS에서 z-index 속성은 요소의 스택 순서를 지정합니다. 페이지에서 어떤 요소가 다른 요소의 "앞" 또는 "뒤"에 표시되는지 결정합니다. 그러나 ::before 또는 ::after와 같은 의사 요소의 경우 z-index와의 상호 작용이 때로는 간단하지 않을 수 있습니다.

::문제 설명에 설명된 대로 의사 요소 앞에 있습니다. 의사 요소를 헤더 요소 뒤에 두려고 하는데 헤더에 z-index를 적용하면 예기치 않게 의사 요소가 전경에 나타납니다.

설명은 의사 요소의 특성에 있습니다. 요소 자체. CSS 사양에 명시된 대로 ::before 및 ::after 의사 요소는 "관련 요소 바로 안에 삽입된 실제 요소인 것처럼 다른 상자와 상호 작용합니다." 이는 의사 요소가 상위 요소 내에 효과적으로 중첩된다는 것을 의미합니다.

헤더 요소에 z-인덱스를 적용하면 새로운 스택 컨텍스트가 생성됩니다. 스태킹 컨텍스트는 요소가 z-인덱스 값 순서대로 렌더링되는 3D 공간입니다. 동일한 스태킹 컨텍스트 내의 요소는 서로 겹칠 수 없습니다.

이 경우 의사 요소는 헤더 요소와 동일한 스태킹 컨텍스트 내에 위치합니다. 중첩된 요소로 간주되므로 스택 컨텍스트를 이스케이프해야 하기 때문에 헤더 뒤에 떠 있을 수 없습니다.

이 문제를 해결하려면 제안된 대로 헤더 앞에 별도의 요소를 만드는 것이 좋습니다. 대답에. 이 요소는 헤더와 의사 요소의 컨테이너 역할을 하며, 해당 z-인덱스는 헤더를 앞에 올바르게 스택합니다.