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; }
<H1>POSICIONAMENT ABSOLUT</H1>
<P>Primer exemple de posicionament absolut. El tÝtol (H1) estÓ absolutament posicionat, mentre que els dos parÓgrafs no tenen la propietat position especificada, Ús a dir, tenen position:static. Aix˛ vol dir que es situen seguint el fluxe normal.</P>
<P>Observa que els dos parÓgrafs es situen al principi de la pÓgina, com si l'H1 no hi fos!</P>
POSICIONAMENT ABSOLUT
Primer exemple de posicionament absolut. El tÝtol (H1) estÓ absolutament posicionat, mentre que els dos parÓgrafs no tenen la propietat position especificada, Ús a dir, tenen position:static. Aix˛ vol dir que es situen seguint el fluxe normal.
Observa que els dos parÓgrafs es situen al principi de la pÓgina, com si l'H1 no hi fos!

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;
}
POSICIONAMENT ABSOLUT
Primer exemple de posicionament absolut. El tÝtol (H1) estÓ absolutament posicionat, mentre que els dos parÓgrafs no tenen la propietat position especificada, Ús a dir, tenen position:static. Aix˛ vol dir que es situen seguint el fluxe normal.
Observa que els dos parÓgrafs es situen al principi de la pÓgina, com si l'H1 no hi fos!

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'.

<DIV id="header">
Free Music
<IMG src="guitarsolo.jpg" />
<A href="mailto:wec@dense13.com">Mail-me!</A>
</DIV>
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:

CSS en catalÓ
Darrera actualitzaciˇ: 11 de gener de 2004

© 2002-04, weC - Gonzalo PÚrez de la Ossa
Contacte: wec@dense13.com

Valid XHTML 1.0! Valid CSS!