Posisi Unsur Bertindan dengan Lembaran Gaya Cascading
Salah satu cabaran apabila menggunakan kedudukan CSS untuk susun atur laman web ialah beberapa elemen anda mungkin bertindih dengan orang lain. Ini berfungsi dengan baik jika anda mahu unsur terakhir dalam HTML berada di atas, tetapi bagaimana jika anda tidak atau bagaimana jika anda ingin mempunyai unsur-unsur yang saat ini tidak bertindih kepada orang lain untuk berbuat demikian kerana reka bentuk memerlukan "lapisan berlapis" ? Untuk mengubah cara elemen bertindih anda perlu menggunakan sifat CSS.
Sekiranya anda menggunakan alat grafik dalam Word dan PowerPoint atau lebih banyak editor imej yang mantap seperti Adobe Photoshop, maka kemungkinan anda melihat sesuatu seperti z-indeks dalam tindakan. Dalam program ini, anda boleh menyerlahkan objek yang telah anda pilih dan pilih pilihan untuk "Kirim ke belakang" atau "Bawa ke hadapan" elemen tertentu dokumen anda. Di Photoshop, anda tidak mempunyai fungsi ini, tetapi anda mempunyai anak tetingkap "Lapisan" program dan anda boleh mengatur di mana elemen jatuh di kanvas dengan menyusun semula lapisan ini. Dalam kedua-dua contoh ini, anda pada asasnya menetapkan z-indeks objek tersebut.
Apakah indeks z?
Apabila anda menggunakan kedudukan CSS untuk meletakkan elemen pada halaman, anda perlu berfikir dalam tiga dimensi. Terdapat dua dimensi standard: kiri / kanan dan atas / bawah. Indeks kiri ke kanan dikenali sebagai indeks x, manakala bahagian atas ke bawah ialah indeks y. Inilah cara anda meletakkan elemen secara mendatar atau menegak, menggunakan kedua indeks ini.
Ketika datang ke reka bentuk web, terdapat juga susunan susunan halaman. Setiap elemen pada halaman boleh berlapis di atas atau di bawah unsur lain. Properti z-indeks menentukan di mana dalam timbunan setiap elemen adalah. Jika indeks x dan indeks y adalah garis mendatar dan menegak, maka z-indeks adalah kedalaman halaman, pada dasarnya dimensi ke-3.
Saya suka memikirkan unsur-unsur di halaman web sebagai kepingan kertas, dan laman web itu sendiri sebagai kolaj. Di mana saya meletakkan kertas ditentukan oleh kedudukan, dan berapa banyaknya yang diliputi oleh unsur-unsur lain ialah indeks z.
Indeks-z adalah bilangan, baik positif (misalnya 100) atau negatif (misalnya -100). Indeks zi lalai ialah 0. Unsur dengan z-indeks tertinggi berada di atas, diikuti oleh tertinggi seterusnya dan seterusnya ke z-indeks terendah. Jika dua elemen mempunyai nilai z-indeks yang sama (atau tidak ditakrifkan, bermakna penggunaan nilai lalai 0) penyemak imbas akan menyatukannya mengikut susunan yang muncul dalam HTML.
Bagaimana Menggunakan z-indeks
Beri setiap elemen yang anda mahu dalam timbunan anda nilai z-indeks yang berbeza. Sebagai contoh, jika saya mempunyai lima elemen berbeza:
- elemen 1 - z-indeks dari -25
- elemen 2 - z-indeks dari 82
- elemen 3 - z-indeks tidak ditetapkan
- elemen 4 - z-indeks 10
- elemen 5 - z-indeks dari -3
Mereka akan menyusun susunan berikut:
- elemen 2
- elemen 4
- elemen 3
- elemen 5
- elemen 1
Saya cadangkan menggunakan nilai z-indeks yang sangat berbeza untuk menyusun elemen anda. Dengan cara itu, jika anda menambah lebih banyak unsur ke halaman kemudian, anda mempunyai ruang untuk memasangkannya tanpa perlu menyesuaikan nilai z-indeks semua elemen lain. Sebagai contoh:
- 100 untuk elemen saya yang paling utama
- 0 untuk elemen tengah saya
- -100 untuk elemen bawah saya
Anda juga boleh memberikan dua elemen nilai z-indeks yang sama. Jika unsur-unsur ini disusun, mereka akan memaparkan mengikut susunan yang ditulis dalam HTML, dengan unsur terakhir di atas.
Satu nota, untuk elemen untuk menggunakan z-index property dengan berkesan, ia mestilah elemen tahap blok atau menggunakan paparan "blok" atau "baris inline" dalam fail CSS anda.
Artikel asal oleh Jennifer Krynin. Disunting pada 12/09/16 oleh Jeremy Girard.