Menempatkan Elemen yang Tumpang Tindih dengan Cascading Style Sheets
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 telah menggunakan alat grafis di Word dan PowerPoint atau editor gambar yang lebih kuat seperti Adobe Photoshop, maka 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 elemen jatuh di kanvas dengan menata ulang 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 susunan 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.
Saya suka memikirkan elemen-elemen di halaman web sebagai potongan kertas, dan halaman web itu sendiri sebagai kolase. Di mana saya 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 z-index yang sama (atau tidak didefinisikan, artinya menggunakan nilai default 0) browser akan melapisnya dalam urutan yang muncul dalam HTML.
Cara Menggunakan z-index
Berikan setiap elemen yang Anda inginkan dalam tumpukan Anda dengan nilai z-index yang berbeda. Misalnya, jika saya memiliki lima elemen berbeda:
- elemen 1 - z-indeks -25
- elemen 2 - z-indeks 82
- elemen 3 - z-index tidak disetel
- elemen 4 - z-indeks 10
- elemen 5 - z-indeks -3
Mereka akan menumpuk dalam urutan berikut:
- elemen 2
- elemen 4
- elemen 3
- elemen 5
- elemen 1
Saya menyarankan 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 saya
- 0 untuk elemen tengah saya
- -100 untuk elemen bawah saya
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 menjadi elemen level blok atau menggunakan tampilan "block" atau "inline-block" di file CSS Anda.
Artikel asli oleh Jennifer Krynin. Diedit pada 12/09/16 oleh Jeremy Girard.