상위 요소에 Z-인덱스를 적용할 때 내 ::before 의사 요소가 상위 요소 뒤에 표시되지 않는 이유는 무엇입니까?

Z-색인 및 의사 요소: 심층 탐구

이 기사에서는 CSS의 매혹적인 세계를 탐구합니다. 스태킹 컨텍스트 및 의사 요소, 특히 ::before 의사 요소와 상호 작용하는 방법. 우리는 ::before와 함께 z-index를 사용할 때 발생하는 일반적인 문제를 탐색하고 올바른 스태킹 동작을 보장하는 포괄적인 솔루션을 제공할 것입니다.

문제

다음을 고려하세요. 다음 CSS:

<code class="css">header { 
    background: yellow;
    position:relative;
    height: 100px;
    width: 100px;
    z-index:30;
}

header::before { 
    content:"Hide you behind!";
    background: red;
    position:absolute;
    height: 100px;
    width: 100px;
    top:25px;
    left:25px;
    z-index:-1;
}</code>

이 코드에서는 ::before 의사 요소를 사용하여 '헤더' 요소를 만들었습니다. 원하는 동작은 노란색 '헤더' 요소가 전경에 있고 의사 요소 앞의 빨간색 ::이 배경에 있는 것입니다. 그러나 'header' 요소에 30의 z-index를 적용하면 ::before 의사 요소가 더 이상 상위 요소 뒤에 나타나지 않습니다.

설명

이 동작을 이해하려면 CSS 스택 컨텍스트의 개념을 자세히 살펴봐야 합니다. 스택 컨텍스트는 요소가 z-인덱스 값에 따라 서로 앞이나 뒤에 쌓이는 레이어 집합을 정의합니다. 스태킹 컨텍스트 생성은 z-index를 포함한 특정 CSS 속성에 의해 트리거됩니다.

위의 예에서 z-index 30을 'header' 요소에 적용하면 새로운 스태킹이 생성됩니다. 문맥. 이 새로운 스택 컨텍스트는 '헤더' 요소와 해당 하위 요소(:before 의사 요소 포함)를 나머지 문서 흐름에서 분리합니다.

:before 의사 요소는 내의 하위 요소로 간주됩니다. '헤더' 요소의 스태킹 컨텍스트입니다. 따라서 스태킹 컨텍스트의 경계에 의해 제한되며 '헤더' 요소 뒤에 나타나도록 외부에 떠 있을 수 없습니다.

해결책

이 문제를 해결하기 위해 우리는 ::before 의사 요소의 z-index를 단순히 늘릴 수는 없습니다. 대신, '헤더' 요소 뒤에 올바르게 스택될 수 있도록 ::before 의사 요소에 대한 새로운 스택 컨텍스트를 생성해야 합니다.

이를 달성하는 한 가지 방법은 '헤더' 요소를 래핑하는 것입니다. 아래와 같이 다른 요소에:

<code class="css"><div class="wrapper">
  <header>
    ...
  </header>
</div>

.wrapper { 
    position:relative;
    z-index:30;
}</code>

이 새 요소를 생성하고 Z-인덱스를 할당함으로써 본질적으로 '헤더' 요소의 스택 컨텍스트와 별개인 새로운 스택 컨텍스트를 생성하게 됩니다. 이를 통해 ::before 의사 요소가 새 스택 컨텍스트 내 '헤더' 요소 뒤에 올바르게 스택될 수 있습니다.

결론

CSS 스택 컨텍스트 및 의사 요소 이해 복잡한 레이아웃을 만들고 적절한 요소 위치를 지정하려면 요소 상호 작용이 필수적입니다. 스택 컨텍스트를 주의 깊게 관리함으로써 요소의 레이어링을 제어하고 원하는 시각적 효과를 얻을 수 있습니다.

위 내용은 상위 요소에 Z-인덱스를 적용할 때 내 ::before 의사 요소가 상위 요소 뒤에 표시되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!