Bestjoeren fan oerlapende eleminten mei Cascading Style Sheets
Ien fan 'e útdagings by it brûken fan CSS-posysje foar webside-layout is dat guon fan jo eleminten oaren oerlappe kinne. Dit wurket goed as jo wolle dat it lêste elemint yn 'e HTML boppe stiet, mar wat as jo net of wat wannear't jo eleminten hawwe wolle dy't hjoed de oaren net oerlappe om sa te dwaan om't it ûntwerp opropt foar dit "layered" look ? Om 'e wize fan eleminten oerlappe te feroarjen moatte jo it eigendom fan CSS brûke.
As jo in Grafike-ark brûkt hawwe yn Word en PowerPoint of robuster byldverzorging lykas Adobe Photoshop, dan kinne jo kâns hawwe dat jo wat sjogge as z-yndeks yn aksje. Yn dizze programma's kinne jo it objekt (s) markearje, dy't jo opnommen hawwe, en in opsje kieze om "Skeurje nei werom" of "Bring to front" foar guon eleminten fan jo dokumint. Yn Photoshop hawwe jo dizze funksjes net, mar jo hawwe de "Layer" -finster fan it programma en jo kinne regelje wêr't in elemint falt yn it lein troch it opnijrearringen fan dizze lagen. Yn sawol dizze foarbylden binne jo yn essinsje de z-yndeks fan dy objekten ynstelle.
Wat is z-yndeks?
As jo CSS-posysje brûke om eleminten op 'e side te plakken, moatte jo tinke yn trije diminsjes. Der binne de twa standert dimensjes: lofts / rjochts en top / bottom. De lofter nei rjochte yndeks is bekend as de x-yndeks, wylst de boppe nei ûnderen ien de y-yndeks is. Dit is hoe't jo eleminten horizontaal of vertysk plakken sette, mei dizze twa yndekses.
Wannear't jo komme yn web-ûntwerp, dan is ek de stapkearrings fan 'e side. Elke elemint op 'e side kin boppe- of ûnder ien elemint lizze. It z-yndeks eigendom bepaalt wêr't yn elke elemint elke elemint is. As x-yndeks en y-yndeks binne de horizontale en fertikale rigels, dan is de z-index de djipte fan 'e side, yn essinsje de 3e dimensje.
Ik wol graach tinke oan 'e eleminten op in webside as stikjes papier, en de webside sels as in kollaazje. Wêr't ik it papier lizze, wurdt bepaald troch posysje, en hoefolle fan it is dield troch de oare eleminten is de z-yndeks.
De z-yndeks is in nûmer, ofwol positive (bgl. 100) of negatyf (bgl. -100). De standert z-yndeks is 0. It elemint mei de heechste z-yndeks is boppe, folge troch de folgjende heechste en sa op del nei de leechste z-yndeks. As twa eleminten itselde z-yndekswearde hawwe (of it is net definiearre, dat betsjut brûk de standertwearde fan 0), sil de blêder se yn 'e oarder skriuwe, dy't se yn it HTML ferskine.
Hoe kinne de z-yndeks brûke
Jou elke elemint dy't jo wolle yn jo stapel in oare z-yndekswearde. Bygelyks, as ik fiif ferskillende eleminten haw:
- elemint 1 - z-yndeks fan -25
- elemint 2 - z-yndeks fan 82
- elemint 3 - z-yndeks is net ynsteld
- elemint 4 - z-yndeks fan 10
- elemint 5 - z-yndeks fan -3
Se sille de folgjende folchoarder stean:
- elemint 2
- elemint 4
- elemint 3
- elemint 5
- elemint 1
Ik advisearje it gebrûk fan folle ferskillende z-index-wearden om jo eleminten te ferstopjen. Op dizze manier, as jo mear eleminten oan 'e side letter taheakje, hawwe jo keamer om se te meitsjen sûnder de z-index-wearden fan alle oare eleminten oan te passen. Bygelyks:
- 100 foar myn top-elemint
- 0 foar myn midden elemint
- -100 foar myn ûnderdielsel
Jo kinne ek twa eleminten itselde z-index wearde jaan. As dizze eleminten opnij binne, sille se sjen yn 'e oarder dat se yn it HTML skreaun binne, mei it lêste elemint op' e top.
Ien oantekening, foar in elemint om de z-yndeks eigendom te brûken, moat it in fluchnivo-elemint wêze of in display fan "blok" of "ynlineblok" brûke yn jo CSS-bestân.
Oarspronklik artikel fan Jennifer Krynin. Edited on 12/09/16 by Jeremy Girard.