Posicionament d’una caixa

Una de les coses que podem fer amb CSS és modificar el posicionament dels elements de l’HTML.

Per defecte, el navegador considera que tots els elements tenen una posició del tipus static. Static significa que es visualitzaran on els toqui (darrera l’element anterior, abans del següent element) i alineats per defecte a l’esquerra. Quan fem scroll els elements es mouen amb el cos de la pàgina.

Podem fer servir altres tipus de posicionament:

• Absolute
• Fixed
• Sticky

Els elements amb una posició absolute es col·loquen per sobre d’altres elements, trepitjant-los. Les coordenades de la seva posició es poden donar respecte a l’esquerra (left), respecte a la dreta (right), respecte a la part superior (top) o respecte a la part inferior (bottom). Caldrà, però, tenir clar quin és el marc de referència, quan posicionem un element.

Per defecte, el marc de referència serà l’element body. És a dir, que si posicionem un element de manera absoluta es col·locarà a la part superior esquerra del body (o a la distància de la part superior, esquerra, dreta o inferior que li assignem)

Si volem posicionar-l’ho respecte a un altre element, aleshores caldrà que aquest altre element sigui contenidor d’allò que volem posicionar (o contenidor del contenidor, o contenidor del contenidor del contenidor etc) i que tingui la posició relativa (relative) o absoluta (absolute).

Quan fem scroll, l’element posicionat de manera absoluta es mourà quan es mogui el seu element de referència.

Els elements amb posició fixa (fixed) estan enganxats a la finestra, com si s’haguessin quedat enganxats al vidre de la pantalla. Les coordenades que podem fer servir per posicionar-los són les mateixes (top, bottom, left o right) però el marc de referència sera sempre la pantalla, no el body o cal altre element.

Els elements amb posició sticky (enganxosa) tenen una posició static fins que el seu contenidor toca els límits de la pantalla, moment en el que es comporten com si fossin del tipus fixed.

A qualsevol pàgina web trobaràs un o varis tipus de posicionament. A classe hem buscat pàgines web a siteinspire.net que fessin servir els 3 tipus de posicionament. Les imatges de l’exemple corresponen a la web https://www.sofiepavittface.com/

L’eix Z

Ja hem vist que podem moure un element en l’eix X (horitzontal) i Y (vertical). També podem moure un element en l’eix Z (endavant – endarrera).

El navegador assigna un index en l’eix Z a cada element (propietat z-index). Els elements que apareixen abans a l’HTML tenen un valor de z-index més baix que els que apareixen més tard. Els elements amb un z-index més gran (ex: 9999) es veuran per sobre d’elements amb un z-index més petit. Amb CSS podem assignar un valor diferent del que li correspon a un element i fer que es mostri o s’amagui darrera d’altres elements. Una pràctica habitual és donar un valor gegant a les capçaleres que tenen una posició fixe, tipus 9999.

header{
position:absolute;
top:0; left:0;
z-index: 9999;
}

Un altre ús de la propietat position:relative..

Donar posició relativa a un element també ens permetrà moure aquest element fent servir els valors top, right, bottom o left. Si volem desplaçar un element respecte al punt que té assignat per defecte, haurem de donar-li posició relativa (relative) abans d’assignar un valor a top, right, bottom o left. Un element de tipus static no deixarà la seva posició ni amb aiguaràs, que en diuen a València 🙂