El posicionament CSS és més que només coordenades X, Y
El posicionament CSS ha estat durant molt de temps una part important de la creació de dissenys de llocs web. Fins i tot amb l'augment de les noves tècniques de disseny de CSS com Flexbox i CSS Grid, el posicionament encara té un lloc important en la borsa de trucs de qualsevol dissenyador web.
Quan utilitzeu el posicionament CSS, el primer que heu de fer és establir la propietat CSS per indicar-li al navegador si usareu el posicionament absolut o relatiu d'un determinat element. També heu d'entendre clarament la diferència entre aquestes dues propietats de posicionament.
Tot i que són absolutes i relatives les dues propietats de posició CSS més utilitzades en el disseny web, en realitat hi ha quatre estats a la propietat de posició:
- estàtic
- absolut
- familiar
- fix
Static és la posició predeterminada per a qualsevol element d'una pàgina web. Si no definiu la posició d'un element, serà estàtic. Això vol dir que es mostrarà a la pantalla en funció del lloc on es trobi en el document HTML i com es mostrarà dins del flux normal d'aquest document.
Si apliqueu regles de posicionament com ara superiors o esquerres a un element que tingui una posició estàtica, aquestes regles seran ignorades i l'element romandrà on apareix en el flux normal del document. De debò, rarament, si cal, haureu d'establir un element a una posició estàtica a CSS ja que aquest és el valor predeterminat.
Absoluta CSS Posicionament
El posicionament absolut és probablement la posició CSS més fàcil d'entendre. Comenceu amb aquesta propietat de posició CSS:
posició: absoluta;Aquest valor indica al navegador que tot allò que es va a ubicar s'haurà de treure del flux normal del document i, en lloc d'això, situar-se en una ubicació exacta a la pàgina. Això es calcula a partir de l'avantpassat més proper posicionat no estàticament d'aquest element.
Atès que un element absolutament posicionat es treu del flux normal del document, no afectarà la manera en què els elements que hi ha abans o després d'això en l'HTML es col·loquen a la pàgina web.
Com a exemple, si teníeu una divisió que es posava usant un valor de relatiu (veurem aquest valor en breu), i dins d'aquesta divisió teníeu un paràgraf que volíeu col·locar 50 píxels des de la part superior de la divisió. afegir un valor de posició de "absolut" a aquest paràgraf juntament amb un valor de compensació de 50 píxels a la propietat "superior", com aquest.
posició: absoluta; top: 50 px;Aquest element absolutament posicionat sempre mostrarà 50 píxels des de la part superior d'aquesta divisió relativament posicionada, independentment del que més es mostri en el flux normal. El vostre element "absolutament" posicionat usava la posició relativament posicionada com el seu context i el valor de posicionament que utilitza és relatiu.
Les quatre propietats de posicionament que teniu disponibles per utilitzar són:
- superior
- dret
- fons
- esquerra
Podeu utilitzar la part superior o la inferior (ja que un element no es pot ubicar d'acord amb aquests dos valors) i bé a la dreta o a l'esquerra.
Si un element s'estableix en una posició d'absoluta, però no té ancestres posicionats de manera no estàtica, es col·locarà en funció de l'element del cos, que és l'element de nivell més alt de la pàgina.
Posicionament relatiu
Ja hem esmentat el posicionament relatiu, així que mirem ara aquesta propietat.
El posicionament relatiu utilitza les mateixes quatre propietats de posicionament que el posicionament absolut, però en comptes de basar la posició de l'element en el seu ancestre més proper posicionat no estàticament, comença des d'on l'element seria si encara estigués en el flux normal.
Per exemple, si teniu tres paràgrafs a la vostra pàgina web i el tercer té un estil "posició: relatiu" col·locat sobre ell, la posició es compensarà en funció de la ubicació actual.
Paràgraf 1.
Paràgraf 2
Paràgraf 3.
A l'exemple anterior, el tercer paràgraf es posicionarà 2em des del costat esquerre de l'element contenidor, però encara estarà per sota dels dos primers paràgrafs. Es mantindrà en el flux normal del document, i simplement es compensarà lleugerament. Si la heu posat a la posició: absoluta; tot seguit es mostrarà damunt d'ell, perquè ja no estaria en el flux normal del document.
Els elements d'una pàgina web s'utilitzen sovint per establir un valor de posició: relativa, sense establir el valor de compensació, el que significa que l'element roman exactament on apareixeria en el flux normal. Això es fa únicament per establir aquest element com un context en què es poden situar de manera absoluta altres elements. Per exemple, si teniu una divisió que envolta tot el lloc web amb un valor de classe de "contenidor" (que és un escenari molt comú en el disseny web), aquesta divisió es pot establir en una posició de parentiu de manera que qualsevol cosa dins d'ella pugui utilitzar ho com a context de posicionament.
Què passa amb el posicionament fix?
El posicionament fix és molt semblant al posicionament absolut. La posició de l'element es calcula de la mateixa manera que el model absolut, però els elements fixos es resolen en aquesta ubicació, gairebé com una filigrana . Tot el que hi ha a la pàgina es desplaçarà darrere d'aquest element.
Per utilitzar aquest valor de la propietat, definiu:
posició: fixa;Tingueu en compte que, quan corregiu un element al vostre lloc, s'imprimirà en aquesta ubicació quan s'imprimeixi la vostra pàgina web. Per exemple, si el vostre element està fixat a la part superior de la vostra pàgina, apareixerà a la part superior de cada pàgina impresa, ja que està fixada a la part superior de la pàgina. Podeu utilitzar tipus de suports per canviar com les pàgines imprimides mostren elements fixos:
@media screen {h1 # first {position: fixed; }} @media print {h1 # first {position: static; }}Article original de Jennifer Krynin. Editat per Jeremy Girard el 7/7/16.