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

Linda Hamilton
Lepaskan: 2024-11-13 11:50:02
asal
575 orang telah melayarinya

How to Create a Border Overlay on a Nested Element without Using 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;
}
Salin selepas log masuk

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

<div class="button">
  some text
</div>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan