Bagaimana Anda Boleh Meletakkan Elemen Pseudo di Belakang Induknya Apabila Induk Mempunyai Indeks Z?

Memanipulasi Z-Index untuk Pseudo-Elements

Dalam CSS, menggunakan z-index pada elemen induk boleh memberi kesan kepada kelakuan susun pseudo -elemen. Artikel ini meneroka isu ini dan menyediakan penyelesaian.

Masalahnya

Apabila elemen induk diberi indeks-z, elemen pseudo yang terkandung di dalamnya akan terkurung dalam konteks susun ibu bapa. Elemen pseudo tidak lagi boleh dilanjutkan di luar konteks ini untuk muncul di belakang induk.

Memahami Konteks Penimbunan

Mencipta Konteks Penimbunan baharu pada asasnya mencipta lapisan berasingan untuk elemen berkenaan. Elemen dalam lapisan itu diasingkan daripada elemen di luar konteks. Dalam kes ini, unsur pseudo, yang biasanya wujud di dalam lapisan induk, kini terperangkap dalam konteks tindanan baharu induk.

Penyelesaian

Untuk menyelesaikan masalah isu, CSS membenarkan seseorang keluar daripada konteks susun atur. Ini biasanya dicapai dengan memperkenalkan elemen baharu sebelum elemen induk yang memerlukan susunan susunan tertentu. Elemen "pembungkus" ini membentuk konteks tindanannya sendiri, membenarkan elemen pseudo kekal di belakangnya sambil masih menjejaskan susunan susunan elemen berikutnya.

Contoh Kod

Pertimbangkan kod berikut:

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

Dengan mencipta div "pembungkus" dan menetapkan kedudukannya kepada relatif dan indeks-z kepada 30, kami mewujudkan konteks tindanan baharu di luar yang unsur pseudo boleh wujud. Elemen pseudo kini boleh muncul di belakang elemen "pengepala" kuning, seperti yang dimaksudkan.

Atas ialah kandungan terperinci Bagaimana Anda Boleh Meletakkan Elemen Pseudo di Belakang Induknya Apabila Induk Mempunyai Indeks Z?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!