Posisi Elemen Overlapping dengan Cascading Style Sheets
Salah sijine tantangan nalika nggunakake CSS setelan kanggo tata letak kaca web iku sawetara saka unsur bisa tumpang tindih liyane. Iki pancen apik yen sampeyan pengin elemen pungkasan ing HTML dadi ing ndhuwur, nanging apa yen sampeyan ora utawa apa yen sampeyan pengin duwe unsur sing saiki ora tumpang tindih wong liya amarga desain telpon iki "dilapisi" katon ? Kanggo ngganti cara tumpang tindih elemen sampeyan kudu nggunakake properti CSS.
Yen sampeyan nggunakake piranti grafis ing Word lan PowerPoint utawa luwih kaya gambar editor kaya Adobe Photoshop, kemungkinan sampeyan wis katon kaya z-index ing tumindak. Ing program kasebut, sampeyan bisa nyorot obyek sing digambar, lan milih opsi kanggo "Kirim ulang" utawa "Nggawa" sing durung ditemokake ing document tartamtu. Ing Photoshop, sampeyan ora duwe fungsi kasebut, nanging sampeyan duwe panel "Layer" saka program lan sampeyan bisa ngatur ngendi unsur ketat ing kanvas kanthi nyusun ulang lapisan kasebut. Ing loro conto kasebut, sampeyan pancen nyetel indeks z kasebut.
Apa z-index?
Nalika sampeyan nggunakake CSS posisi kanggo posisi unsur ing kaca, sampeyan kudu mikir ing telung dimensi. Ana rong dimensi standar: kiwa / tengen lan ndhuwur / ngisor. Indeks ngiwa kanggo tengen dikenal minangka indeks x, dene sing paling dhuwur ing ngisor iki yaiku indeks y. Iki carane sampeyan bakal posisi unsur ing horisontal utawa vertikal, nggunakake indeks loro iki.
Nalika rawuh ing desain web, ana uga urutan tumpukan kaca. Saben unsur ing kaca bisa dilapis ing ndhuwur utawa ing sangisore unsur liyane. Properti z-indeks nemtokake lokasi ing tumpukan saben unsur. Yen indeks x lan indeks y minangka garis horisontal lan vertikal, banjur z-indeks iku ambane saka kaca, ateges dimensi kaping telu.
Aku seneng mikirake unsur-unsur ing kaca web minangka potongan kertas, lan kaca web dhewe minangka kolase. Ngendi aku lay kertas ditemtokake dening posisi, lan jumlah sing katutup dening unsur liyane iku indeks z.
-indeks z adalah angka, baik positif (misalnya 100) atau negatif (misalnya -100). Indeks z-default yaiku 0. Unsur kanthi indeks z paling dhuwur ing posisi paling dhuwur, disusul paling dhuwur sabanjuré lan paling dhuwur ing indeks z paling rendah. Yen loro unsur duwe nilai z-indeks sing padha (utawa ora ditetepake, tegese nggunakake nilai gawan 0) browser bakal lapisan mau supaya bisa katon ing HTML.
Cara Gunakake z-indeks
Menehi saben unsur sampeyan pengin nganggo tumpukan z-indeks sing beda-beda. Contone, yen aku duwe limang unsur beda:
- unsur 1 - z-indeks saka -25
- unsur 2 - z-index saka 82
- unsur 3 - z-indeks ora disetel
- unsur 4 - z-index saka 10
- unsur 5 - z-indeks saka -3
Bakal padha tumpukan kaya ing ngisor iki:
- unsur 2
- unsur 4
- unsur 3
- unsur 5
- unsur 1
Aku nyaranake nggunakake nilai z-indeks sing beda-beda kanggo numpuk unsur sampeyan. Mangkono, yen sampeyan nambah unsur liyane ing kaca salajengipun, sampeyan duwe ruang kanggo nutupi kasebut tanpa kudu nyetel z-indeks nilai kabeh unsur liyane. Tuladhane:
- 100 kanggo unsur paling dhuwur
- 0 kanggo unsur tengahku
- -100 kanggo unsur dhasarku
Sampeyan uga bisa menehi loro unsur nilai z-indeks sing padha. Yen unsur-unsur iki dibandhingke, bakal ditampilake supaya ditulis ing HTML, kanthi unsur pungkasan ing ndhuwur.
Siji tandha, kanggo sawijining unsur kanthi èfèktif nggunakake z-index property, kudu dadi unsur level blok utawa nggunakake tampilan "block" utawa "inline-block" ing file CSS sampeyan.
Artikel asli dening Jennifer Krynin. Diedit ing 12/09/16 dening Jeremy Girard.