Introducció

El posicionament consisteix en determinar l'ubicació que tindrà cada element de la plana web en el dispositiu de visualització. Per a entendre el posicionament cal entendre primer el model de caixes associades als elements HTML.

Model de caixes

Quan un navegador ha de visualitzar una plana web, associa a cada element HTML un rectangle. Aquest rectangle té unes característiques que determinen la seva visualització i l'espai que ocuparà dins la plana web.

• margin: distància entre dos elements HTML.
• border: contorn de la caixa.
• padding: distància entre el contorn i el contingut.
• width: amplada del rectangle.
• height: altura del rectangle.

El model de caixes estàndard determina que l'amplada i l'altura de la caixa està formada només pel contingut (content). Així, si s'especifica que l'amplada serà de 300 píxels, el navegador destinarà aquest espai per a la visualització del contingut. El padding, el contorn i el marge no estan inclosos.

En les versions anteriors a Internet Explorer 6 o per declaracions (DOCTYPE) de documents determinades (no per HTML 5), el càlcul de l'amplada del contingut es realitza de forma diferent i inclou el padding i el contorn. Així, si definim una amplada de 300 píxels, un padding de 13 píxels i un contorn de 2 píxels, l'amplada que es destinarà al contingut (content) serà de 270 píxels. 30 píxels estaran destinats al padding i al contorn

Amplada contingut = width - (LP + RP) - (LB + RB) = 300 - ( 13 + 13 ) - ( 2 + 2 ) = 270

Una primera forma per a ubicar els elements serà variant les propietat d'aquests elements. Així, per exemple, modificant la propietat margin-top o la propietat padding puc desplaçar un element per la plana web.

Cada element disposa d'unes proppietats margin i padding amb uns valors per defecte. Aquest valor ve determinat pel navegador que utilitzi l'usuari o la configuració de la fulla d'estils del navegador. És una bona pràctica eliminar els "margin" i "padding" de tots els elements per tal de garantir que la visualització sigui la mateixa en tots els navegadors web.

* {margin: 0; padding: 0;} /* Inicialitzacó a 0 (eliminació) dels elments margin i padding */

"Inline" i bloc

HTML, segons la seva visualització, defineix dos tipus d'etiquetes:

1. Etiquetes de bloc.
2. Etiquetes "inline".

És important saber si una etiqueta és de tipus bloc o inline per a poder determinar quin serà l'espai que ocuparà cada un dels elements en la visualització de la plana web.

Bloc

Les etiquetes que tenen una visualització de bloc són aquelles que per defecte ocupen tot l'espai horitzontal disponible. Per defecte, dues etiquetes de bloc es visualitzen en el navegador una sota l'altre. Algunes etiquetes de tipus bloc són: p , ul , h1 , ...

Com es pot observar a la imatge, tot i que el contingut dels elements h1 i p no ocupen tot l'espai horitzontal, sí que aquest és ocupat pel propi l'element. Si afegim un contorn a cada un dels elements, s'observa com tot l'espai horitzontal és ocupat per l'element. L'espai vertical s'ajusta automàticament a l'altura que es precisa pel contingut.

Inline

Les etiquetes "in-line" són aquelles que el navegador web ubica una al costat de l'altre fins a acabar l'espai horitzontal disponible. Algunes etiquetes que tenen la visualització per defecte a inline són: img , a , strong , ...

Propietat display

La propietat display ens permet canviar la visualització per defecte d'un element. Així, per exemple, puc ordenar que un element de tipus bloc es visualitza de forma inline o viceversa.

Nota: apart d'aquests dels modes inline i block, la propietat _display_ permet molts més valors i variants.

Video:

Dimensions model de caixes

Les dimensions que s'assiginin a un element és molt important en relació a l'ubicació que ocuparan la resta d'elements en la visualització de la plana. Axí, per exemple, un element de tamany X pot ubicar-se a la dreta o sota un altre element segons el tamany horitzontal disponible i el tamany de cada un dels elements. A mesura que es redueix el tamany horitzontal, o que els elements augmenten la seva amplada, els elements tendeixen a ubicar-se uns sota els altres.

Amb les propietats width i height podem donar dimensions a un element . En el moment de donar les dimensions és important tenir en compte les unitats que utilitzem. De la mateixa forma que no és el mateix comprar quilògrams o grams, no és el mateix utilitzar píxels o centímetres.

Posicionament

El posicionament d'un element en la plana web depèn de varis factors:

• Dimensió i tipus de caixa.
• Esquema de posicionament.
  • Fluxe normal.
  • Elements flotants.
  • Posicionament absolut.
• Relació entre els elements en l'arbre HTML.
• Informació externa.
  • Dimensions finestra navegador.
  • Tamany de les imatges.

Sistemes de posicionament en CSS

El sistema CSS disposa de 5 sistemes diferents per a ubicar els elements:

1. Absolut.
2. Estàtic.
3. Fix.
4. Relatiu.
5. "Sticky".

Per a modificar el posicionament d'un element utilitzem la propietat position . Aquesta propietat accepta 4 valors possibles, relacionats amb les diferents formes d'ubicació dels elements: absolute, fixed, relative, static, sticky

Posicionament estàtic

El posicionament estàtic és el posicionament per defecte dels elements que composen una plana web. Aquest posicionament té en compte si la visualització de l'element és "inline" o en bloc i ubica els elements d'esquerra a dreta i de dalt a baix segons l'espai disponible i l'espai que ocupa cada un dels elments.

Posicionament relatiu

El posicionament relatiu ubica els elements en relació a l'element anterior. La visualització d'una plana web utilitzant posicionament estàtic o relatiu serà la mateixa sempre i quan no s'utilitzin les propietats top o left per a desplaçar els elements.

Video: Diferència entre posicionament estàtic i relatiu

Una altra de les característiques del posicionament relatiu és que quan un element es desplaça utilitzant top o left, la resta d'elements de la plana web continuen a la mateixa posició que ocupaven abans de desplaçar l'element. Per tant, amb el posicionament relatiu puc moure un element sense afectar a la resta d'elements.

Observem les dues imatges inferiors. A la imatge de l'esquerra, simplement s'han ubicat tots els elements de forma relativa; donat que no hem utilitzat ni top ni left el resultat en posicionament estàtic hauria sigut el mateix. A la imatge de la dreta, s'han desplaçat tots els elements de tipus paràgraf 100 píxels més avall. L'espai que ocupaven els paràgrafs continuen buits: ni els elements de tipus títol ni la llista han variat la seva posició. Com podem veure, degut al desplaçament, alguns elements han quedat sol·lapats.

En aquest cas, és millor utilitzar la propietat left . Amb aquesta propietat, podem indentar els paràgrafs evitant el solapament dels elements. En la imatge, s'ha reduit la dimensió de la caixa associada al paràgraf amb 50 píxels per a compensar els 50 píxels en què s'ha desplaçat el paràgraf a l'esquerra.

top , left

Les propietats top i left ens permeten defnir el desplaçament a aplicar a un element que no estigui posicionat de forma estàtica.

El valor de la propietat top prèn com a referència el contorn superior del contenidor al que s'aplica la propietat. Els valors positius per a la propietat top, allunyen l'element del contorn superior del seu contenidor. Valors negatius, en canvi, distancien l'element del contorn inferior del contenidor.

El valor de la propietat left prèn com a referència el contorn esquerra del contenidor al que s'aplica la propietat. Els valors positius per a la propietat left, allunyen l'element del contorn esquerra del seu contenidor. Valors negatius, en canvi, distancien l'element del contorn dret del contenidor.

Posicionament fix

En aquest tipus de posicionament l'element queda fixat. Aquest posicionament és útil si volem que una informació sempre sigui visible, encara que es faci "scroll" del contingut de la plana. Podem utilitzar aquest posicionament per a fixar un menú en la nostra plana web, uns anuncis, ...

A diferència del posicionament relatiu, el posicionament fix allibera l'espai que ocupava inicialment l'element. Per tant, tots els elements que hi ha a continuació es desplaçen per a ocupar el nou espai que ha deixat lliure la reubicació de l'element.

En la imatge primer s'han eliminat tots els paddings i margins que incorporen per defecte els diferents elements. Observem que en el posicionament fix dels paràgrafs, tots els elements posteriors al primer paràgraf s'han desplaçat per a ocupar l'espai alliberat pel paràgraf. Aquesta situació es dóna també en el segon paràgraf.

Posicionament absolut

En el posicionament absolut, al igual que el fix, l'element que es posiciona allibera l'espai que ocuparia si el seu posicionament fos estàtic. La diferència entre el posicionament absolut i el fix, és que en el posicionament absolut l'element es desplaça de forma conjunt amb la plana: no queda fixat en un lloc específic de la plana.

bottom , right

Quan el posicionament és absolut, apart de les propietats left i top explicades en el posicionament relatiu, podem utilitzar dues propietats més: bottom i right .

Aquestes propietats ens permeten definir quina és la distància de l'element respecte al contorn inferior i dret respectivament en relació al seu contenidor pare. Així, per exemple, si s'especifica 0 (zero) com a valor right de la propietat, l'element quedarà "enganxat" al contorn dret del seu contenidor.

En el cas de la propietat bottom , si el valor especificat és 0, l'element es visualitzarà en la part inferior del seu contenidor: enganxat en el contorn inferior.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="estils/main.css" />
    <title>CSS</title>
  </head>
  <body>
    <nav>
      <p>Menu</p>
    </nav>
    <main>
      <p>Main</p>
    </main>
    <aside>
      <p>aside</p>
    </aside>
    <footer>
      <p>footer</p>
    </footer>
  </body>
</html>

  * {margin: 0;}

  nav {width: 900px;}

  nav, aside {background-color: rgba(127,127,127,0.5);}

  main {background-color: rgba(10,0,127,0.5);}
  footer { background-color: rgba(127,127,0,0.5); }
  nav, aside, main, footer {position: relative;height: 50vh;}

  p {position: absolute;right: 0;bottom: 0;}