CSS - Z-Index: Menjawar Teknik Seni Pelapisan Elemen

Hai sana, para ahli reka bentuk web masa depan! Hari ini, kita akan melihat salah satu ciri paling magik dalam CSS: z-index. Itu seperti memiliki kekuatan super yang membolehkan anda mengawal elemen mana yang muncul di atas yang lain. Menarik, kan? Marilah kita mengembara bersama!

Apa Itu Z-Index?

Sebelum kita melompat ke hal yang mendalam, mari kita memahami apa itu z-index. Bayangkan anda menata susunan stack kertas di meja anda. Z-index adalah seperti memutuskan kertas mana yang diletakkan di atas yang lain. Dalam reka bentuk web, ia membantu kita mengawal susunan tumpuan elemen yang bersilang.

Sejarah Singkat

Kembali ke zaman awal reka bentuk web, mencipta susunan tumpuan adalah seperti mimpi buruk. Kita terpaksa menggunakan reka bentuk table yang kasar atau mengguna pakai bingkai (yikes!). Kemudian datang z-index, dan tiba-tiba, kita dapat mencipta reka bentuk silang yang kompleks dengan mudah. Itu seperti menemui lorong rahasia dalam permainan video!

Nilai Yang Mungkin

Sekarang, mari kita lihat nilai yang berbeza z-index boleh mengambil:

Nilai	Keterangan
auto	Nilai default. Elemen ditumpukkan mengikut susunan mereka dalam HTML
number	Boleh positif atau negatif. Nombor yang tinggi muncul di atas nombor yang rendah
initial	Menetapkan z-index ke nilai defaultnya
inherit	Mewarisi nilai z-index dari elemen induknya

Terpakai Pada

Z-index terpakai kepada elemen yang ditempatkan (position: relative, absolute, fixed, atau sticky). Ia tidak berkerja pada elemen statik, yang adalah penempatan default.

Sintaks DOM

Ini adalah bagaimana anda boleh menetapkan z-index dalam HTML anda:

<div style="z-index: 1;">Saya di atas!</div>
<div style="z-index: 0;">Saya di bawah!</div>

Tetapi ingat, biasanya lebih baik untuk menjaga gaya anda dalam fail CSS yang berasingan. Mari lihat bagaimana itu kelihatan:

.on-top {
z-index: 1;
}
.below {
z-index: 0;
}

<div class="on-top">Saya di atas!</div>
<div class="below">Saya di bawah!</div>

CSS z-index - Nilai auto

Bila anda tidak menentukan z-index, atau menetapkannya ke 'auto', elemen ditumpukkan mengikut susunan mereka dalam HTML. Mari lihat contoh:

<div class="box red">Kotak Merah</div>
<div class="box blue">Kotak Biru</div>
<div class="box green">Kotak Hijau</div>

.box {
width: 100px;
height: 100px;
position: absolute;
}
.red {
background-color: red;
left: 0;
top: 0;
}
.blue {
background-color: blue;
left: 50px;
top: 50px;
}
.green {
background-color: green;
left: 100px;
top: 100px;
}

Dalam kes ini, kotak hijau akan di atas, diikuti biru, kemudian merah. Itu seperti mereka sedang bermain permainan lompat tinggi!

CSS z-index - Dengan Integer Positif

Sekarang, mari kita ganti haluan sedikit. Kita boleh menggunakan integer positif untuk mengawal secara eksplisit susunan tumpuan:

.red {
background-color: red;
left: 0;
top: 0;
z-index: 3;
}
.blue {
background-color: blue;
left: 50px;
top: 50px;
z-index: 2;
}
.green {
background-color: green;
left: 100px;
top: 100px;
z-index: 1;
}

Dengan z-index nilai ini, merah akan di atas, kemudian biru, kemudian hijau. Itu seperti kita memberikan merekaVIP pass ke kelab eksklusif, dengan merah sebagai tamu yang paling penting!

CSS z-index - Dengan Integer Negatif

Nilai z-index negatif adalah seperti menghantar elemen ke basemen. Mereka akan muncul di belakang elemen dengan z-index positif atau tiada:

.background {
background-color: yellow;
z-index: -1;
}
.content {
z-index: 0;
}

Di sini, latar belakang kuning akan selalu di belakang kandungan. Itu seperti menyiapkan backdrop untuk wayang!

CSS z-index - Dengan Penempatan Sticky

Penempatan sticky adalah seperti memberikan elemen permit untuk meninggalkan aliran normalnya, tetapi hanya di bawah syarat tertentu. Z-index juga bekerja dengan penempatan sticky:

.sticky-header {
position: sticky;
top: 0;
z-index: 100;
}

Header ini akan melekat ke puncak viewport saat anda gulir, dan ia akan tetap di atas kandungan lain karena z-index tingginya. Itu seperti seorang teman setia yang selalu mempunyai pendamping anda!

CSS z-index - Dengan Penempatan Fixed

Penempatan fixed adalah mirip dengan absolut, tetapi ia selalu relatif ke viewport. Z-index sangat berguna di sini:

.modal {
position: fixed;
z-index: 1000;
}
.overlay {
position: fixed;
z-index: 999;
}

Ini memastikan dialog modal anda selalu muncul di atas overlay. Itu seperti memastikan bintang pertunjukan selalu dalam sorotan!

CSS z-index - Dengan Penempatan Statik

Ingat saat saya katakan z-index tidak bekerja dengan penempatan statik? Well, ini apa yang terjadi:

.static-element {
position: static;
z-index: 999; /* Ini tidak akan berbuat apa-apa */
}

Itu seperti mencoba menggunakan sihir di dunia Muggle - ia hanya tidak akan bekerja!

CSS z-index - Dengan Penempatan Relatif

Penempatan relatif adalah di mana z-index benar-benar berkilau. Ia membolehkan anda mencipta reka bentuk kompleks tanpa mengubah aliran dokumen:

.parent {
position: relative;
}
.child1 {
position: relative;
z-index: 2;
}
.child2 {
position: relative;
z-index: 1;
}

Di sini, child1 akan muncul di atas child2, walaupun child2 muncul kemudian dalam HTML. Itu seperti memberikan elemen anda superpower untuk menentang graviti!

Danitu saja, teman-teman! Anda telah meningkatkan kemahiran CSS anda dengan kekuatan z-index. Ingat, dengan kekuatan yang besar datang tanggung jawab yang besar. Gunakan z-index bijak, dan reka bentuk anda akan berterima kasih. Selamat mengoding, dan biar z-index selalu ada bersama anda!

Credits: Image by storyset