Salah satu tantangan ketika menggunakan penempatan CSS untuk tata letak halaman web adalah beberapa elemen Anda dapat tumpang tindih dengan yang lain. Ini berfungsi dengan baik jika Anda ingin elemen terakhir di HTML berada di atas, tetapi bagaimana jika Anda tidak atau bagaimana jika Anda ingin memiliki elemen yang saat ini tidak tumpang tindih dengan yang lain untuk melakukannya karena desain panggilan untuk ini "berlapis" tampilan ? Untuk mengubah cara elemen tumpang tindih, Anda perlu menggunakan properti CSS.
Jika Anda menggunakan alat grafis di Word dan PowerPoint atau editor gambar yang lebih kuat seperti Adobe Photoshop, kemungkinan Anda telah melihat sesuatu seperti z-index sedang beraksi. Dalam program ini, Anda dapat menyorot objek yang telah Anda gambar, dan memilih opsi untuk "Kirim ke belakang" atau "Bawa ke depan" elemen-elemen tertentu dari dokumen Anda. Di Photoshop, Anda tidak memiliki fungsi-fungsi ini, tetapi Anda memiliki panel "Lapisan" dari program dan Anda dapat mengatur di mana suatu elemen jatuh pada kanvas dengan menata ulang lapisan-lapisan ini. Dalam kedua contoh ini, Anda pada dasarnya mengatur z-index dari objek-objek tersebut.
Apa itu Z-Index?
Saat Anda menggunakan pemosisian CSS untuk memosisikan elemen di halaman, Anda harus berpikir dalam tiga dimensi. Ada dua dimensi standar: kiri / kanan dan atas / bawah. Indeks kiri ke kanan dikenal sebagai indeks-x, sedangkan indeks atas ke bawah adalah indeks-y. Ini adalah bagaimana Anda akan memosisikan elemen secara horizontal atau vertikal, menggunakan dua indeks ini.
Ketika datang ke desain web, ada juga urutan susun halaman. Setiap elemen pada halaman dapat berlapis di atas atau di bawah elemen lainnya. Properti z-index menentukan tempat di tumpukan setiap elemen. Jika x-index dan y-index adalah garis horizontal dan vertikal, maka z-index adalah kedalaman halaman, pada dasarnya dimensi ke-3.
Pikirkan elemen-elemen di halaman web sebagai potongan kertas dan halaman web itu sendiri sebagai kolase. Di mana Anda meletakkan kertas ditentukan oleh posisi, dan berapa banyak yang ditutupi oleh unsur-unsur lain adalah indeks-z.
- Indeks-z adalah angka, baik positif (misalnya 100) atau negatif (misalnya -100).
- Indeks z standar adalah 0.
Elemen dengan indeks z tertinggi berada di atas, diikuti oleh yang tertinggi berikutnya dan seterusnya hingga ke indeks-z terendah. Jika dua elemen memiliki nilai indeks-z yang sama (atau tidak ditentukan, artinya menggunakan nilai default 0) browser akan melapisinya dalam urutan yang muncul di HTML.
Cara Menggunakan Z-Index
Berikan setiap elemen yang Anda inginkan dalam tumpukan Anda dengan nilai z-index yang berbeda. Misalnya, jika Anda memiliki lima elemen berbeda:
- elemen A - z-indeks -25
- elemen B - z-indeks 82
- elemen C - z-index tidak disetel
- elemen D - z-indeks 10
- elemen E - z-indeks -3
Mereka akan menumpuk dalam urutan berikut:
- elemen B
- elemen D
- elemen C
- elemen E
- elemen A
Disarankan untuk menggunakan nilai indeks z yang sangat berbeda untuk menumpuk elemen Anda. Dengan begitu, jika Anda menambahkan lebih banyak elemen ke halaman nanti, Anda memiliki ruang untuk melapisnya tanpa harus menyesuaikan nilai indeks-z dari semua elemen lainnya. Sebagai contoh:
- 100 untuk elemen paling atas Anda
- 0 untuk elemen tengah Anda
- -100 untuk elemen bawah Anda
Anda juga dapat memberikan dua elemen nilai z-index yang sama. Jika elemen-elemen ini ditumpuk, mereka akan ditampilkan dalam urutan yang ditulis dalam HTML, dengan elemen terakhir di atas.
Satu catatan: untuk elemen untuk secara efektif menggunakan properti z-index, itu harus berupa elemen level blok atau menggunakan tampilan "block" atau "inline-block" di file CSS Anda.
