Secció 4: Posicionament CSS

4. Esquemes de posicionament

4.3. Posicionament absolut

Entrem en un dels punts més interessants i útils del posicionament CSS. És un capítol llarg i amb força contingut interessant. Llest?

Els elements amb position: absolute es comporten naturalment d'acord amb l'esquema de posicionament absolut.

En l'esquema de posicionament absolut l'element es treu totalment del fluxe normal, de forma que els elements que el segueixen es comporten com si no existís. L'element absolutament posicionat es visualitza aleshores repecte el seu bloc contenidor, que correspon a l'àrea padding de l'element avantpassat posicionat més proper. Si no n'hi ha cap, aleshores el bloc contenidor és l'àrea de contingut de l'element arrel (HTML). Fixa't que a diferència dels elements no posicionats absolutament, el bloc contenidor inclou l'àrea padding. En veurem un exemple a l'apartat següent, 'Exemple de posicionament absolut: un layout senzill'

Nota: Quan vàrem parlar dels blocs contenidors vaig fer-ne una definició aproximada, que no s'adeia amb els elements absolutament posicionats. Ara pots veure clarament la diferència: aleshores vaig dir que el bloc contenidor "correspon concretament a l'àrea de contingut de l'element bloc avantpassat més proper". En el cas d'elements posicionats absolutament, cal afegir la condició 'posicionat' a l'element avantpassat, i canviar 'àrea de contingut' per 'àrea padding'.

Dit d'una altra manera, un element posicionat estableix el bloc contenidor dels seus descendents posicionats absolutament. Per exemple, un element A2 posicionat dins un element A1 no posicionat té com a bloc contenidor no l'element A1, sinó el seu avantpassat posicionat més proper. Si en canvi a A1 li assignem un valor de position diferent de static, passàra a establir el bloc contenidor d'A2.

Crec que ha arribat el moment de veure'n algun exemple!

Exemple 1: posicionament absolut

H1 {
position: absolute;
border: 2px solid red;
}

P { background-color: #ffc2b0; }

Observa el codi: l'element H1 està posicionat, amb valor absolute. Això implica:

1. Que serà extret del fluxe normal, i els elements que el segueixen es comporten com si no existís. És a dir, el primer paràgraf es situa al principi de la pàgina.
2. Que l'H1 es posiciona respecte el seu avantpassat positionat més proper. Com que no n'hi ha cap, ho fa respecte l'element arrel, HTML, i per tant es posiciona... també al principi de la pàgina!!

El resultat és que part del primer paràgraf queda oculta per l'H1! Obviament aquest no és un efecte desitjable, però l'exemple ens serveix per il·lustrar el posicionament absolut. De seguida veurem altres exemples més realistes.

Control de la posició

Per controlar la posició d'un element amb posicionament absolut utilitzem les propietats top, right, bottom i left. Aquestes propietats especifiquen el desplaçament de l'element posicionat respecte l'extrem corresponent del bloc contenidor. Per exemle, si a l'exemple anterior afegim left: 30px s'estableix un desplaçament de 30 píxels respecte l'extrem esquerre del bloc conenidor.

H1 {
position: absolute;
left: 30px;
border: 2px solid red;
}

Fixa't que els paràgrafs no s'han modificat en absolut. L'única diferència és que l'H1, un cop eliminat del fluxe normal, s'ha situat en el seu bloc contenidor d'acord amb el desplaçament indicat per left.

Sovint situarem els elements posicionats absolutament mitjançant dues d'aquestes propietats, típicament top i left.

El valor per defecte de top, right, bottom i left és auto. Veurem que significa aquest valor més endavant, quan parlem del càlcul de marges i dimensions al capítol 6.

Elements absolutament posicionats anidats

La situació més interessant és quan un element B amb posició absoluta és descendent d'un altre element A que està posicionat. En aquest cas el bloc contenidor de B l'estableix A, i no pas l'element arrel com passava en els exemples anteriors. Aleshores les propietats top, right, bottom i left indiquen desplaçaments respecte els extrems de l'àrea de contingut de l'element A. Per exemple:

#header {
position: absolute;
top: 10px; left: 50px;
border: 2px solid #e22525;
padding: 0 4px;
}

#header a {
position: absolute;
bottom: 10px; right: 10px;
background-color: white;
border: 2px solid #406b97;
}

Nota: Recordes els selectors contextuals? La segona declaració afecta a tots els A que estiguin dins un element amb id 'header'.

Free Music

Mail-me!

El DIV amb id 'header' està posicionat. Com que no té cap avantpassat posicionat, es situa a 10px de l'extrem superior de la pàgina i a 50px de l'esquerra. Dins d'aquest DIV hi ha un text ('Free Music') i una imatge (hehe, 'a la Hitchcock'...). I després de la imatge hi ha un link amb el text 'Mail-me!'. Aquest link també està posicionat i per tant es treu del fluxe normal, i es situa respecte el seu bloc contenidor, que resulta ser el DIV, ja que és el seu avantpassat posicionat més proper. Per tant el link es situa 10px per sota i per la dreta respecte el DIV. Per ser més precisos, respecte l'àrea de padding del DIV.

Algunes coses més...

Doncs això és tot! Ja saps com funciona el posicionament absolut, i amb una mica de pràctica es convertirà en una eina indispensable per al disseny de webs. Deixa'm però remarcar alguns conceptes més:

• El bloc contenidor l'estableix l'element avantpassat posicionat més proper. Sovint tindrà position: absolute, però també són possibles els valors relative i fixed, que estudiarem en els propers capítols. L'únic necessari és que estigui posicionat.
• Quan un element està absolutament posicionat, la mida de la caixa s'adapta al contingut. Ho pots veure en el primer exemple, el de l'H1 absolutament posicionat: enlloc d'ocupar tota l'amplada disponible, com fan normalment els elements de bloc, les vores s'adapten al contingut de text.
• Qualsevol element amb position: absolute (i també fixed) passa a ser un element de bloc! Així doncs es comporten igual un DIV o un A si estan absolutament posicionats. Ho pots comprovar a l'exemple anterior, que té un link posicionat.
• Sovint combinaràs les propietats width i height amb el posicionament absolut. Com que les dimensions dels elements absolutament posicionats s'adapten per defecte al contingut, possiblement vulguis establir mides de forma explícita per controlar-ne totalment l'aspecte.