## `z-index`를 사용할 때 `::before` 의사 요소를 상위 요소 뒤에 배치하는 방법은 무엇입니까?

전 의사 요소에 대한 Z-색인 수수께끼

상위 요소 내에서 이전 의사 요소를 사용할 때 해당 문제를 해결하는 것이 필수적입니다. 포지셔닝 동작. 기본적으로 의사 요소는 상위 요소 안에 위치합니다.

그러나 상위 요소에 Z-인덱스를 할당하면 새로운 스택 컨텍스트가 생성되어 해당 콘텐츠가 격리됩니다. 결과적으로, 음수 z-인덱스를 사용하더라도 스택 컨텍스트 경계로 인해 이전 의사 요소가 상위 요소 뒤에 나타날 수 없습니다.

이 문제를 해결하려면 다음 해결 방법을 고려하세요.

1. 별도의 요소 계층 구조: 헤더 요소 앞에 다른 요소가 옵니다. 이렇게 하면 새 상위 요소에 헤더보다 낮은 Z-색인이 부여될 수 있는 자연스러운 스택 순서가 생성되어 이전 의사 요소가 그 뒤에 나타날 수 있습니다.
2. Z-색인 중첩: 덜 권장되지만, 의사 요소에 음수 z-인덱스 값을 사용하고 상위 요소에 양수 값을 사용하여 동일한 스택 컨텍스트 내에서 원하는 스택 순서를 생성할 수 있습니다. 그러나 이 접근 방식은 코드가 더 복잡해지고 브라우저 간 호환성 문제가 발생할 수 있습니다.

예:

<code class="css"><div class="wrapper">
  <header>
    content...
    <span class="pseudo-element">Before content...</span>
  </header>
</div>

.wrapper {
  position: relative;
  z-index: 0;
}

header {
  position: relative;
  background: yellow;
  height: 100px;
  width: 100px;
  z-index: 1;
}

.pseudo-element {
  position: absolute;
  background: red;
  height: 100px;
  width: 100px;
  top: 25px;
  left: 25px;
  z-index: 0;
}</code>

위 내용은 ## `z-index`를 사용할 때 `::before` 의사 요소를 상위 요소 뒤에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!