Positiounen iwwerlappend Elementer mat Kaskadierstilblieder
Eent vun den Herausfuerderungen beim Benotze vun der CSS-Platzéierung fir Websäit Layout ass datt e puer vun Ären Elementer iwwerlappt fir anerer. Dëst funktionnéiert gutt wann Dir de leschte Element am HTML wëllt op der Säit sinn, awer wat wann Dir net oder wat Dir musst Elementer hunn, déi momentan net iwwertlappt fir anerer ze maachen, well d'Design fir dësen "layered" Look ? Fir Äert Elementer ze iwwerschreiwe fir ze änneren musst Dir d'Eigenschaft vum CSS benotzen.
Wann Dir eng Grafik-Tools an Word a PowerPoint benotzt oder méi robust Bildautomaten wéi Adobe Photoshop benotzt hutt, dann sinn d'Chancen datt Dir eppes wéi z-Index an Aktiounen gesitt. An dëse Programmer kënnt Dir d'Objet markéieren, déi Dir gewënscht hutt, a wielt eng Optioun fir "Sous back back" oder "Bring virausgesat" fir verschidde Elemente vun Ärem Dokument. In Photoshop, hutt Dir dës Funktioun net, awer Dir hutt den "Layer" -Festel vum Programm, an Dir kënnt arrangéieren datt e Element an der Leinwand fällt andeems dës Schichten ëmgeet. An deenen zwee Beispiller, sidd Dir am wesentlechen d'Z-Index vun dësen Objeten.
Wat ass z-Index?
Wann Dir CSS Positioning benotzt, fir Elementer op der Säit ze positionéieren, musst Dir an dräi Dimensiounen denken. Et gi zwou Standardmaart: lénks / riets a top / bottom. De Link op de richtege Index ass bekannt als den x-Index, während d'Uewen um ënneschten een den y-Index ass. Dëst ass wéi Dir Elementer horizontal oder vertikal positionéiert hunn, déi zwou Indexer hunn.
Wann Dir am Webdesign kënnt kënnt et och d'Stackingreihenfolge vun der Säit. All Element op der Säit kann méi oder méi iergendeng iergendengem Element erfëllt ginn. D'Z-Index Eigenschaft bestëmmt, wou am Stack all Element ass. Wann den x-Index an den y-Index déi horizontal a vertikale Linnen ass, ass de z-Index d'Tiefe vun der Säit, am Wesentlechen déi 3. Dimensioun.
Ech denken iwwer d'Elementer op enger Websäit als Pabeierpapier an d'Websäit selwer als Collage. Wou ech de Pabeier liesen, ass festgeluecht ginn duerch d'Positionéierung, a wéi vill dovun ass vun den aneren Elementer bedeckt ass den z-Index.
De Z-Index ass eng Zuel, entweder positiv (zB 100) oder negativ (zB -100). De Standard z-Index ass 0. De Element mam héchste z-Index ass op Top, gefollegt duerch déi nächst héchsteg an sou weider op de tiefsten z-Index. Wann zwee Elementer de selwechte Z-Index-Wert hunn (oder et ass net definéiert, wat heescht de Standardwert vun 0 benotzen) den Browser ze lafe se an der Uerdnung déi se an der HTML erscheinen.
Wéi benotzen den Z-Index
Gitt all Element Dir an Ärem Stack eng aner z-Indexwert. Zum Beispill, wann ech fënnef verschidden Elementer hunn:
- Element 1 - z-Index vu -25
- Element 2 - z-Index vun 82
- Element 3 - z-Index net festgeluegt
- Element 4 - z-Index vun 10
- Element 5 - z-Index vun -3
Si stackéieren an der folgender Reiefolleg:
- Element 2
- Element 4
- Element 3
- Element 5
- Element 1
Ech recommandéiere mat immens vill verschidden Z-Index Wäerter fir Är Elementer ze stackelen. Wann Dir méi spéit méi Elementer un der Säit hinzeweisen, hutt Dir Plaz fir se ze Layer ze maachen ouni d'Z-Index Wäerter vun all deenen aneren Elemente anzebezéien. Zum Beispill:
- 100 fir meng Top-Element
- 0 fir méngem Mëttelmier
- -100 fir meng Bottom Element
Dir kënnt och zwee Elementer de selwechte Z-Index Wäert ginn. Wann dës Elemente stackéiert sinn, ginn se an der Uerdnung, déi se an dem HTML geschriwen hunn, mat dem leschten Element op der Säit.
Eng Note, fir e Element fir effektiv d'Z-Index-Eigenschaft ze benotzen, muss et e Blockniveauelement sinn oder e Bild vun "Block" oder "Inline-Block" an Ärer CSS-Datei benotzen.
Original Artikel vum Jennifer Krynin. Editéiert am 12/09/16 vum Jeremy Girard.