상위 요소에 Z-인덱스가 있는 경우 상위 요소 뒤에 의사 요소를 어떻게 배치할 수 있습니까?

의사 요소에 대한 Z-색인 조작

CSS에서 상위 요소에 Z-색인을 적용하면 의사 요소의 스택 동작에 영향을 미칠 수 있습니다. -강요. 이 문서에서는 문제를 살펴보고 해결책을 제공합니다.

문제

상위 요소에 Z-색인이 제공되면 포함된 의사 요소가 내부에 국한됩니다. 부모의 스태킹 컨텍스트. 의사 요소는 더 이상 이 컨텍스트 외부로 확장되어 상위 요소 뒤에 나타날 수 없습니다.

스태킹 컨텍스트 이해

새 스태킹 컨텍스트를 생성하면 기본적으로 문제의 요소. 해당 레이어 내의 요소는 컨텍스트 외부의 요소와 격리됩니다. 이 경우 일반적으로 상위 레이어 내부에 존재하는 의사 요소는 이제 상위의 새로운 스태킹 컨텍스트 내에 갇혀 있습니다.

해결책

문제인 CSS를 사용하면 스태킹 컨텍스트에서 벗어날 수 있습니다. 이는 일반적으로 특정 스택 순서가 필요한 상위 요소 앞에 새 요소를 도입함으로써 달성됩니다. 이 "래퍼" 요소는 자체 스택 컨텍스트를 형성하여 유사 요소가 뒤에 남아 있으면서도 후속 요소의 스택 순서에 영향을 줍니다.

코드 예

다음 코드를 고려해보세요.

<code class="css"><div id="wrapper">
  <header>
    <span class="pseudo">Hide me!</span>
  </header>
</div>

#wrapper {
  position: relative;
  z-index: 30;
}

header {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: yellow;
}

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

"래퍼" div를 생성하고 해당 위치를 상대 위치로 설정하고 z-index를 30으로 설정하여 의사 요소가 외부에 존재할 수 있는 새로운 스택 컨텍스트를 설정합니다. 이제 의도한 대로 의사 요소가 노란색 "헤더" 요소 뒤에 나타날 수 있습니다.

위 내용은 상위 요소에 Z-인덱스가 있는 경우 상위 요소 뒤에 의사 요소를 어떻게 배치할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!