Mengapakah elemen pseudo saya ::before tidak muncul di belakang elemen induknya apabila saya menggunakan indeks-z pada elemen induk?

Z-index dan Pseudo-Elements: Penerokaan Mendalam

Dalam artikel ini, kita akan mendalami dunia CSS yang menarik menyusun konteks dan cara ia berinteraksi dengan pseudo-elemen, khususnya pseudo-element ::before. Kami akan meneroka masalah biasa yang dihadapi apabila menggunakan z-index dengan ::before dan menyediakan penyelesaian komprehensif yang memastikan tingkah laku susun yang betul.

Masalahnya

Pertimbangkan CSS berikut:

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

Dalam kod ini, kami telah mencipta elemen 'header' dengan ::before pseudo-element. Tingkah laku yang diingini ialah elemen 'header' kuning berada di latar depan dan merah ::sebelum unsur pseudo berada di latar belakang. Walau bagaimanapun, apabila kita menggunakan indeks z 30 pada elemen 'pengepala', elemen pseudo ::before tidak lagi muncul di belakang induk.

Penjelasan

Untuk memahami tingkah laku ini, kita perlu mendalami konsep konteks tindanan CSS. Konteks tindanan mentakrifkan satu set lapisan di mana elemen disusun di hadapan atau di belakang satu sama lain berdasarkan nilai indeks znya. Penciptaan konteks tindanan dicetuskan oleh sifat CSS tertentu, termasuk z-index.

Dalam contoh di atas, apabila kita menggunakan indeks z 30 pada elemen 'header', ia mencipta tindanan baharu konteks. Konteks tindanan baharu ini memisahkan elemen 'header' dan anak-anaknya (termasuk ::before pseudo-element) daripada seluruh aliran dokumen.

Pseudo-element ::before dianggap sebagai elemen anak dalam konteks susunan elemen 'header'. Oleh itu, ia dikekang oleh sempadan konteks tindanan dan tidak boleh terapung di luarnya untuk muncul di belakang elemen 'header'.

Penyelesaian

Untuk menyelesaikan masalah ini, kami tidak boleh hanya meningkatkan z-indeks bagi ::before pseudo-element. Sebaliknya, kita perlu mencipta konteks tindanan baharu untuk elemen pseudo ::before supaya ia boleh disusun dengan betul di belakang elemen 'header'.

Salah satu cara untuk mencapainya ialah dengan membalut elemen 'header'. dalam elemen lain, seperti yang ditunjukkan di bawah:

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

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

Dengan mencipta elemen baharu ini dan memberikannya indeks-z, pada asasnya kami mencipta konteks tindanan baharu yang berasingan daripada konteks tindanan elemen 'header'. Ini membolehkan elemen pseudo ::before disusun dengan betul di belakang elemen 'header' dalam konteks tindanan baharu.

Kesimpulan

Memahami konteks tindanan CSS dan pseudo- interaksi elemen adalah penting untuk mencipta susun atur yang kompleks dan memastikan kedudukan elemen yang betul. Dengan mengurus konteks tindanan dengan teliti, kami boleh mengawal lapisan elemen dan mencapai kesan visual yang diingini.

Atas ialah kandungan terperinci Mengapakah elemen pseudo saya ::before tidak muncul di belakang elemen induknya apabila saya menggunakan indeks-z pada elemen induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!