## Bagaimana untuk Meletakkan `::sebelum` Elemen Pseudo Di Belakang Induknya Apabila Menggunakan `z-index`?

Z-Index Conundrum dengan Before Pseudo-Element

Apabila menggunakan elemen pseudo sebelum dalam elemen induk, adalah penting untuk menanganinya tingkah laku kedudukan. Secara lalai, elemen pseudo diletakkan di dalam induknya.

Walau bagaimanapun, memberikan indeks-z kepada elemen induk mewujudkan konteks tindanan baharu, mengasingkan kandungannya. Akibatnya, unsur pseudo sebelum, walaupun dengan indeks z negatif, tidak boleh muncul di belakang induk disebabkan sempadan konteks tindanan.

Untuk menangani perkara ini, pertimbangkan penyelesaian berikut:

1. Hierarki Elemen Berasingan: Mendahului elemen pengepala dengan elemen lain. Ini mewujudkan tertib tindanan semula jadi yang mana elemen induk baharu boleh diberikan indeks z lebih rendah daripada pengepala, membenarkan elemen pseudo sebelum muncul di belakangnya.
2. Z-Index Nesting: Walaupun kurang disyorkan, anda boleh menggunakan nilai indeks z negatif untuk unsur pseudo dan nilai positif untuk elemen induk untuk mencipta susunan tindanan yang diingini dalam konteks tindanan yang sama. Walau bagaimanapun, pendekatan ini boleh membawa kepada kod yang lebih kompleks dan kemungkinan isu keserasian merentas penyemak imbas.

Contoh:

<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>

Atas ialah kandungan terperinci ## Bagaimana untuk Meletakkan `::sebelum` Elemen Pseudo Di Belakang Induknya Apabila Menggunakan `z-index`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!