Positioning tindih Unsur kalawan Cascading Style cadar
Salah sahiji tantangan nalika maké positioning CSS for teu ngarenah kaca web téh boga sawatara elemen Anjeun bisa tumpang tindih batur. Ieu jalan halus upami anjeun hoyong unsur panungtungan dina HTML janten on luhur, tapi kumaha lamun ulah atanapi naon lamun hoyong gaduh elemen nu ayeuna teu tumpang tindih batur pikeun ngalakukeunana sabab desain nyaéta panggero pikeun ieu "layered" kasampak ? Dina raraga ngarobah cara elemen tumpang tindih anjeun kedah nganggo milik CSS.
Lamun geus dipaké hiji parabot grafik dina Word na PowerPoint atawa editor gambar langkung mantap kawas Adobe Photoshop, teras Chances anjeun geus katempo hal kawas z-indéks dina peta. Dina program ieu, anjeun bisa nyorot objek (s) nu tos Anjeun digambar, jeung milih hiji pilihan pikeun "Kirim deui" atawa "Bawa ka hareup" elemen tangtu dokumen Anjeun. Dina Photoshop, anjeun teu boga fungsi ieu, tapi Sadérék nu gaduh "Lapisan" jandela tina program jeung anjeun bisa ngatur mana unsur ragrag di kanvas nu ku nyusun lapisan ieu. Dina duanana conto ieu, anjeun dasarna netepkeun z-indéks jalma objék.
Naon z-indéks?
Lamun anjeun nuju ngagunakeun positioning CSS jeung posisi elemen dina kaca, Anjeun kudu pikir di tilu dimensi. Aya dua dimensi baku: kénca / katuhu jeung luhureun / handap. The kénca ka indéks katuhu katelah x-indéks, bari luhureun hiji handap teh y-indéks. Ieu kumaha anjeun bakal posisi elemen horisontal atawa vertikal, ngagunakeun dua indexes ieu.
Nalika di datang ka design web, aya oge urutan stacking kaca. Unggal unsur dina kaca bisa layered luhur atawa handap wae unsur séjén. Harta z-indéks nangtukeun mana dina tumpukan nu unggal unsur nyaéta. Lamun x-indéks jeung y-indéks anu garis horizontal na nangtung, teras z-indéks aya jero kaca, dasarna dimensi 3.
Kuring resep mun dipikir tina elemen dina Kalurahan sakumaha potongan makalah, jeung kaca web sorangan salaku collage a. Dimana Kuring iklas kertas ditangtukeun ku posisi, jeung sabaraha tina eta katutupan ku elemen séjén teh z-indéks.
The z-indéks mangrupakeun angka, boh positif (misalna 100) atanapi négatip (misalna -100). The standar z-indéks aya 0. di unsur jeung pangluhurna z-indéks aya di luhur, dituturkeun ku hareup pangluhurna jeung saterusna turun ka panghandapna z-indéks. Mun dua elemen gaduh sarua nilai z-indéks (atawa ayeuna teh henteu tangtu, hartina pamakéan éta nilai standar tina 0) browser bakal lapisan aranjeunna dina urutan maranéhna muncul dina HTML nu.
Kumaha Paké z-indéks
Masihan unggal unsur rék di tumpukan anjeun hiji nilai z-indéks béda. Contona, upami kuring gaduh lima unsur béda:
- unsur 1 - z-indéks of -25
- unsur 2 - z-indéks of 82
- Unsur 3 - z-indéks teu diatur
- Unsur 4 - z-indéks 10
- unsur 5 - z-indéks of -3
Aranjeunna baris tumpukan dina urutan handap:
- unsur 2
- unsur 4
- unsur 3
- unsur 5
- unsur 1
Kuring nyarankeun make nilai z-indéks vastly béda mun tumpukan elemen Anjeun. Cara éta, lamun nambahan elemen deui kacana engké, Anjeun gaduh kamar ka lapisan aranjeunna dina tanpa ngabogaan ngaluyukeun nilai z-indéks sadaya unsur séjén. Salaku conto:
- 100 keur luhur paling-unsur kuring
- 0 pikeun unsur tengah abdi
- -100 pikeun unsur handap kuring
Anjeun oge bisa masihan dua elemen sarua nilai z-indéks. Mun elemen ieu tumpuk, maranéhna bakal nembongkeun dina urutan aranjeunna ditulis dina HTML, jeung unsur panungtungan di luhur.
Hiji catetan, pikeun unsur kana éféktif nganggo harta z-indéks, éta kudu aya unsur tingkat blok atawa ngagunakeun tampilan tina "alok" atawa "inline-block" dina file CSS Anjeun.
Aslina artikel ku Jennifer Krynin. Diédit on 12/09/16 ku Jeremy Girard.