Layout CSS - Properti z-index

z-index aturan menentukan urutan penyangga elemen.

aturan z-index

Ketika elemen ditempatkan, mereka dapat berpotongan dengan elemen lain.

z-index aturan menentukan urutan penyangga elemen (dimana elemen mana yang harus berada di depan, dan elemen mana yang harus berada di belakang).

aturan penyangga elemen dapat berupa angka positif atau negatif:

Ini adalah judul

Karena gambar yang z-index dengan nilai -1, jadi ia akan ditempatkan di belakang teks.

contoh

img {
  posisi: absolu;
  kiri: 0px;
  atas: 0px;
  z-index: -1;
}

Coba Sendiri

Perhatian:z-index hanya berlaku untukelemen penempatan（posisi: absolu、posisi: relatif、posisi: tetap atau posisi: lepas）danbenda elasti（display: flex elemen yang merupakan anak langsung).

Contoh z-index lain

contoh

Di sini, kami melihat elemen dengan urutan penyangga yang lebih tinggi selalu berada di atas elemen dengan urutan penyangga yang lebih rendah:

<html>
<head>
<style>
.container {
  posisi: relatif;
}
.black-box {
  posisi: relatif;
  z-index: 1;
  batas: 2px garis tebal hitam;
  height: 100px;
  marjin: 30px;
}
.gray-box {
  posisi: absolu;
  z-index: 3;
  latar belakang: abu-abu;
  tinggi: 60px;
  lebar: 70%;
  kiri: 50px;
  atas: 50px;
}
.green-box {
  posisi: absolu;
  z-index: 2;
  latar belakang: kuning hijau;
  lebar: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Kotak Hitam</div>
  <div class="gray-box">Kotak Abu-abu</div>
  <div class="green-box">Kotak Hijau</div>
</div>
</body>
</html>

Coba Sendiri

tanpa z-index

jika dua elemen lokasi yang belum disebutkan z-index dalam keadaan重叠，HTML kode yang paling terakhir ditentukanelemen akan ditampilkan di atas semua elemen lain.

contoh

Dengan contoh di atas, tetapi di sini tidak disebutkan z-index：

<html>
<head>
<style>
.container {
  posisi: relatif;
}
.black-box {
  posisi: relatif;
  batas: 2px garis tebal hitam;
  height: 100px;
  marjin: 30px;
}
.gray-box {
  posisi: absolu;
  latar belakang: abu-abu;
  tinggi: 60px;
  lebar: 70%;
  kiri: 50px;
  atas: 50px;
}
.green-box {
  posisi: absolu;
  latar belakang: kuning hijau;
  lebar: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Kotak Hitam</div>
  <div class="gray-box">Kotak Abu-abu</div>
  <div class="green-box">Kotak Hijau</div>
</div>
</body>
</html>

Coba Sendiri

Properti CSS

Properti Penerangan
z-index Tetapkan urutan tumpuan elemen.