Secció 4: Posicionament CSS

4. Esquemes de posicionament

4.5. Posicionament relatiu

El concepte de posicionament relatiu no és esencialment difícil, però sovint és objecte de confusions i malentesos. En aquest capítol intentaré explicar-ne el funcionament i les situacions en què s'utilitza normalment.

Els elements posicionats relativament es comporten d'acord al fluxe normal. Aquesta afirmació és l'essència del posicionament relatiu, i val la pena aturar-s'hi una mica.

Els elements HTML es comporten per defecte segons el fluxe normal (position:static). Si els canviem el valor de position per relative... continuen exactament igual! No canvia el seu esquema de posicionament i per tant tampoc ho fa la seva disposició a la pàgina.

Aleshores, per a què serveix aquest valor de position? La clau és que tot i seguir el fluxe normal, l'element estarà posicionat. I això implica que establirà el bloc contenidor per als seus fills posicionats (ho hem vist a 4.3 'Posicionament absolut'). Aquest fet ens permet combinar el posicionament absolut amb el fluxe normal, cosa que dona una potència extra als layouts basats en CSS. El següent exemple il·lustra aquest fenòmen.

Exemple 1

Imaginem que tenim una pàgina web amb un curs de CSS ;-). A determinats punts de l'explicació es vol insertar uns DIVs aclaridors d'alguns aspectes importants. En aquest exemple els hem assignat la classe 'pos-rel'. Però a més volem que dins d'aquests DIVs, a la cantonada superior dreta, hi hagi un llistat de links amb més informació sobre l'aclariment, que inclourem en un DIV de classe 'nota'. Com ho faríem amb CSS?

.pos-rel {
position: relative;
padding: 10px 40% 10px 10px;
border: 1px solid #333;
background-color: #dbe1fb; }

.pos-rel .nota {
position: absolute;
width: 30%;
right: 5px; top: 5px;
padding: 1em;
border: 1px solid #333;
background-color: #fff; }

Nota: la segona sentència afecta als elements de classe 'nota' que siguin descendents d'un element de classe 'pos-rel'. Ho vàrem veure al capítol de selectors contextuals.

El resultat és el següent:

Si ets usuari d'Internet Explorer, veuràs que els resultats no són el què esperàvem. La posicio del DIV de classe 'nota' no es correcta (IE no estableix correctament el seu bloc contenidor!). I el padding dret del DIV de classe 'pos-rel' tampoc no es mesura de forma correcta (és massa gran). En canvi el usuaris de Mozilla, per exemple, veuran l'exemple correctament. Aquestes incompatibilitats es poden resoldre de diverses maneres, però no és l'objectiu d'aquest curs. Idealment els responsables d'IE s'encarregaran d'adequar futures versions del navegador als estàndards del W3C, del qual són paradoxalment membres. En fi...

Em permeto insistir: l'ús més habitual del posicionament relatiu és actuar com a contenidor d'elements posicionats absolutament.

Posicionament relatiu i top, right, bottom, left

He dit abans que posicionar un element relativament només serveix per establir el bloc contenidor dels seus descendents posicionats i no afecta a la disposició de l'element en si. Això no és estrictament cert quan s'utilitzen les propietats top, right, bottom, left.

L'efecte d'aquestes propietats és el mateix que en el cas d'elements posicionats absolutament: estableixen el desplaçament de l'element respecte el seu bloc contenidor. Ara bé, així com en el posicionament absolut l'ús d'aquestes propietats és fonamental, en el posicionament relatiu rarement s'utilitzen.

Per entendre quin és el resultat d'utilitzar-les en el posicionament relatiu pensa que l'element es situa primer segons el fluxe normal i llavors es desplaça d'aquesta posició d'acord amb els valors de top, right, bottom, left, sense que es moguin els elements anterior i posterior.

Aquest no és normalment un efecte útil però pot ser-ho en algun cas, i sobretot val la pena entendre'l bé per no embolicar-se quan es fan layouts complexes.

Insisteixo, rarament usaràs top, right, bottom, left en elements posicionats relativament.