Posizionamendua Estilografi-zorroko kaskadetan Elementu Gainjarria
Webgunearen diseinua CSS kokapenean erabiltzerakoan erronketako bat da zure elementu batzuek gainontzekoak gainditu ditzaketela. Hau oso ondo funtzionatzen du HTMLren azken elementua goiko aldean egon nahi baduzu, baina zer ez baduzu edo zer egin nahi duten beste batzuek ez duten gainjartzen ez badituzu, diseinuak "geruzan" itxura eskatzen duelako ? Modu zehaztugabea aldatzeko, CSS-ren propietatea erabili behar duzu.
Word eta PowerPoint-en grafiko tresnak erabiltzen dituzu edo Adobe Photoshop bezalako irudi editore sendoagoa erabiltzen baduzu, zuri-indizeen antzeko zerbait ikusten duzu. Programa horietako batean, marraztu dituzun objektuak nabarmendu ditzakezu eta dokumentuaren elementu jakin batzuei "Atzera bidaltzeko" edo "Ekarri aurrean" aukera hautatu. Photoshop-en ez duzu funtzio hau, baina programa "Geruza" panelaren panela daukazu eta elementu bat mihisean erortzen zaren lekuan antolatu dezakezu. Bi adibideetan, funtsean, objektu horien z-indizea ezartzen ari zara.
Zer da z-indizea?
CSS kokapenean erabiltzen ari zarenean orrialdeetako elementuak kokatzeko, hiru dimentsiotan pentsatu behar duzu. Bi dimentsio estandar daude: ezker / eskuin eta goiko / behean. Ezkerreko eskuineko indizea x-indizearen izena da, beheko aldean behekoa y-indizea da. Horrela nola horizontalki edo bertikalki kokatu nahi dituzun elementuak, bi indize horiek erabiliz.
Web diseinuari dagokionean, orriaren pilaketa eskaera ere badago. Orrialdeko elementu bakoitzak beste elementu baten gainetik edo azpitik egon daitezke. Z-indizearen propietateak elementu bakoitza non dagoen pila zehazten du. X-indizea eta y-indizea lerro horizontalak eta bertikalak badaude, orduan z-indizea orriaren sakonera da, funtsean, 3. dimentsioa.
Web orriko elementuek paper zatiak bezala pentsatzen dut, eta web orri bera collage gisa. Paperean kokatzen dudanean posizionamendua zehazten da, eta zenbat beste elementuek estaltzen duten z-indizea da.
Z-indizea zenbaki bat da, positiboa (adibidez, 100) edo negatiboa (adibidez -100). Z-indize lehenetsia 0. Z-indizea altuena duen elementua goiko aldean dago, hurrengo altuena eta ondoren z-indizea txikiena. Bi elementu z-indize balio bera badute (edo ez dago definituta, 0 balio lehenetsia erabiltzea esan nahi du) arakatzaileak HTML kodean agertzen diren ordenean geratuko ditu.
Nola erabili z-indizea
Eman pila bakoitzean nahi duzun elementu bat beste z-indize balio bat. Adibidez, bost elementu badituzu:
- elementua 1 - z-indizea -25
- elementua 2 - z-indizea 82. zk
- elementua 3 - z-indizea ez dago ezarrita
- elementua 4 - z-indizea 10
- elementua 5 - z-indizea -3
Honako ordenan pilatuko dira:
- elementua 2
- elementua 4
- elementua 3
- elementua 5
- elementua 1
Z-indize balio handiak desberdinak erabiliz gomendatzen dut zure elementuak pilatzeko. Horrela, geroago elementu gehiago gehitzen badiozu orrialdeari, beste elementu guztien z-indize-balioak doitu behar izan gabe geratzen dira. Adibidez:
- 100 nire elementu goian
- 0 nire erdiko elementurako
- -100 nire beheko elementurako
Bi elementu zuri-indizea balio bera ere eman diezaiokezu. Elementu hauek pilatuta badira, HTMLan idatzitako ordenean agertuko dira, goiko azken elementua.
Ohar bat, z-indizearen propietate eraginkorrean erabiltzeko elementu batentzat, blokeko elementu bat izan behar da edo "blokea" edo "blokeo-bloke" bistaratzea erabili CSS fitxategian.
Jennifer Krynin-en jatorrizko artikulua. 16/09/09 argitaratua Jeremy Girard-i.