Posisionering van oorvleuelende elemente met Cascading Style Sheets
Een van die uitdagings wanneer CSS-posisionering vir webbladuitleg gebruik word, is dat sommige van jou elemente ander kan oorvleuel. Dit werk goed as jy wil hê dat die laaste element in die HTML bo-aan is, maar wat as jy dit nie doen of wat as jy elemente wil hê wat tans nie oorvleuel om dit te doen nie, want die ontwerp vra vir hierdie "gelaagde" voorkoms. ? Om die manier waarop elemente oorvleuel te verander, moet u die eiendom van CSS gebruik.
As jy 'n grafiese gereedskap in Word en PowerPoint of meer robuuste beeldredakteur soos Adobe Photoshop gebruik het, is die kans dat jy iets soos z-indeks in aksie gesien het. In hierdie programme kan u die voorwerp (e) wat u geteken het, belig en kies 'n opsie om 'Stuur na terug' of 'Bring to front' sekere elemente van u dokument. In Photoshop het u nie hierdie funksies nie, maar u het die lae van die program en u kan reël waar 'n element in die doek val deur hierdie lae te herrangskik. In albei hierdie voorbeelde stel jy in wese die z-indeks van daardie voorwerpe.
Wat is die z-indeks?
As jy CSS-posisionering gebruik om elemente op die bladsy te plaas, moet jy in drie dimensies dink. Daar is die twee standaard afmetings: links / regs en bo / onder. Die linker na regs indeks staan bekend as die x-indeks, terwyl die boonste onder een die y-indeks is. So kan jy elemente horisontaal of vertikaal posisioneer deur hierdie twee indekse te gebruik.
Wanneer dit kom by webontwerp, is daar ook die stapelvolgorde van die bladsy. Elke element op die bladsy kan bo of onder enige ander element gelaag word. Die z-indeks eienskap bepaal waar in die stapel elke element is. As x-indeks en y-indeks die horisontale en vertikale lyne is, is z-indeks die diepte van die bladsy, in wese die 3de dimensie.
Ek dink aan die elemente op 'n webblad as stukke papier, en die webblad self as 'n collage. Waar ek lê, word die papier bepaal deur posisionering, en hoeveel daarvan word deur die ander elemente bedek, is die z-indeks.
Die z-indeks is 'n getal, of positief (bv. 100) of negatief (bv. -100). Die standaard z-indeks is 0. Die element met die hoogste z-indeks is bo-op, gevolg deur die volgende hoogste en so aan tot by die laagste z-indeks. As twee elemente dieselfde z-indekswaarde het (of dit is nie gedefinieer nie, wat die gebruik van die verstekwaarde van 0 beteken) sal die blaaier dit laai in die volgorde wat hulle in die HTML verskyn.
Hoe om z-indeks te gebruik
Gee elke element wat jy in jou stapel wil hê, 'n ander z-indekswaarde. Byvoorbeeld, as ek vyf verskillende elemente het:
- element 1 - z-indeks van -25
- element 2 - z-indeks van 82
- element 3 - z-indeks nie gestel nie
- element 4 - z-indeks van 10
- element 5 - z-indeks van -3
Hulle sal in die volgende volgorde stapel:
- element 2
- element 4
- element 3
- element 5
- element 1
Ek beveel aan dat jy baie verskillende z-indekswaardes gebruik om jou elemente te stapel. Op hierdie manier, as jy later meer elemente by die bladsy voeg, kan jy dit lae sonder om die z-indekswaardes van al die ander elemente aan te pas. Byvoorbeeld:
- 100 vir my top-element
- 0 vir my middelste element
- -100 vir my onderste element
Jy kan ook twee elemente dieselfde z-indeks waarde gee. As hierdie elemente gestapel is, sal hulle vertoon in die volgorde wat hulle in die HTML geskryf word, met die laaste element bo-aan.
Een noot, as 'n element om die z-indeks-eiendom doeltreffend te gebruik, moet dit 'n blokvlak element wees of 'n vertoning van 'blok' of 'inlynblok' in u CSS-lêer gebruik.
Oorspronklike artikel deur Jennifer Krynin. Geredigeer op 12/09/16 deur Jeremy Girard.