Posicionament d'elements superposats amb fulles d'estil en cascada
Un dels reptes en utilitzar el posicionament CSS per al disseny de pàgines web és que alguns dels vostres elements es puguin superposar als altres. Això funciona bé si voleu que l'últim element de l'HTML estigui a la part superior, però què passa si no o què voleu si voleu tenir elements que actualment no es superposen als altres perquè ho facin perquè el disseny demana aquest aspecte "en capes" ? Per canviar la manera en què es superposen els elements, cal utilitzar la propietat de CSS.
Si heu utilitzat eines de gràfics a Word i PowerPoint o a un editor d'imatges més robust, com ara Adobe Photoshop, és probable que hagueu vist alguna cosa com z-index en acció. En aquests programes, podeu ressaltar els objectes que heu dibuixat i triar una opció per a "Enviar cap a enrere" o "Porteu endavant" determinats elements del vostre document. A Photoshop, no teniu aquestes funcions, però teniu el panell "Capa" del programa i podeu ordenar que un element caigui al llençar reordenant aquestes capes. En aquests dos exemples, bàsicament, esteu establint l'índex z d'aquests objectes.
Què és l'índex z?
Quan feu servir el posicionament CSS per col·locar elements a la pàgina, heu de pensar en tres dimensions. Hi ha dues dimensions estàndard: esquerra / dreta i superior / inferior. L'índex d'esquerra a dreta es coneix com l'índex x, mentre que el top-down és el i-index. Així és com situaríeu els elements horitzontalment o verticalment, utilitzant aquests dos índexs.
Quan es tracta de disseny web, també hi ha l'ordre d'apilament de la pàgina. Cada element de la pàgina es pot superposar per sobre o per sota d'un altre element. La propietat z-index determina on està la pila de cada element. Si el x-index i el i-index són les línies horitzontal i vertical, llavors z-index és la profunditat de la pàgina, essencialment la tercera dimensió.
M'agraden pensar els elements d'una pàgina web com a trossos de paper i la pròpia pàgina web com a collage. On col·loco el paper es determina mitjançant el posicionament, i quina part d'ella està coberta pels altres elements és el z-index.
El z-index és un número, ja sigui positiu (per exemple, 100) o negatiu (per exemple -100). L'índex z per defecte és 0. L'element amb el màxim índex z està a la part superior, seguit pel següent més alt i així fins al menor índex z. Si dos elements tenen el mateix valor de l'índex z (o no està definit, és a dir, l'ús del valor predeterminat de 0), el navegador els guardarà en l'ordre que apareixen a l'HTML.
Com s'utilitza z-index
Doneu a cada element que vulgueu a la pila un altre valor d'índex z. Per exemple, si tinc cinc elements diferents:
- element 1 - z-index de -25
- element 2 - z-index de 82
- element 3 - z-index no establert
- element 4 - z-index de 10
- element 5 - z-índex de -3
Es pilaran en el següent ordre:
- element 2
- element 4
- element 3
- element 5
- element 1
Recomano utilitzar valors d'índex z molt diferents per apilar els elements. D'aquesta manera, si afegiu més elements a la pàgina més endavant, podeu allotjar-los sense haver d'ajustar els valors de l'índex z de tots els altres elements. Per exemple:
- 100 per al meu element més destacat
- 0 per al meu element mig
- -100 per al meu element inferior
També podeu donar dos elements al mateix valor d'índex z. Si aquests elements s'apilen, es mostraran en l'ordre que estan escrits en HTML, amb l'últim element a la part superior.
Una nota, per a un element per utilitzar eficaçment la propietat z-index, ha de ser un element de nivell de bloc o utilitzar una visualització de "bloc" o "bloc inline" al vostre fitxer CSS.
Article original de Jennifer Krynin. Editat el 12/09/16 per Jeremy Girard.