Bagaimana untuk Mencipta Tindanan Sempadan pada Elemen Bersarang tanpa Menggunakan z-index?

Mencipta Tindanan Sempadan untuk Elemen Bersarang

Dalam siasatan pengaturcaraan ini, tugasnya adalah untuk meniru reka letak khusus yang menampilkan tindanan sempadan pada bersarang unsur. Struktur HTML dan gaya CSS awal disediakan, tetapi penyelesaian tanpa menggunakan indeks-z dicari.

Untuk mencapai ini, pertimbangkan untuk menggunakan elemen pseudo untuk menjana sempadan. Teknik ini menawarkan kawalan yang lebih besar ke atas kedudukan dan dimensi sempadan:

body {
  background: grey;
}

.button {
  background: #94c120;
  width: 200px;
  height: 50px;
  margin: 50px;
  position: relative;
}

.button:before {
  content: "";
  position: absolute;
  top: -15px;
  left: -15px;
  width: 100%;
  height: 100%;
  border: 5px solid #fff;
  box-sizing: border-box;
}

Dalam HTML yang disediakan, elemen butang boleh dikemas kini untuk menggunakan pendekatan ini:

<div class="button">
  some text
</div>

Penyelesaian ini mencipta tindanan sempadan yang dikehendaki tanpa memerlukan penanda tambahan atau manipulasi z-index. Dengan memanfaatkan elemen pseudo, pembangun boleh mencapai kawalan tepat dan penyesuaian gaya sempadan dalam elemen bersarang.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tindanan Sempadan pada Elemen Bersarang tanpa Menggunakan z-index?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!