• Saltar-se la navegació
• Índex del curs

Mòdul 7: Composició

• Índex
• Pràctica 1
• Pràctica 2
• Pràctica 3
• Pràctica 4
• Pràctica 5
• Pràctica 6
• Pràctica 7
• Exercicis

Posicionament

El llenguatge CSS disposa de sis models de posicionament per a ubicar un element a la finestra del navegador: estàtic, absolut, fix, relatiu, flotant i relatiu flotant. Els quatre primers formen part de la propietat position, el cinquè, el model de posicionament flotant, pertany a la propietat float. L'últim model, el relatiu flotant, és una ocmbinació entre els models de posicionament realiu i flotant.

Propietat position

La propietat position, pot tenir quatre valors diferents: static (estàtic), relative (relatiu), absolut(absolut) i fixed (fix).

estàtic (static)

Per defecte tots les elements són representats pel navegador de manera estàtica, és a dir, respectant el flux normal de la posició de les caixes dels elements segons la seva tipologia, en bloc o en línia. El flux normal consisteix en anidar els blocs dels elements representats verticalment. La posició d'inici d'un element estàtic ve determinada per l'element que el precedeix. La mida, el padding, les vores i els marges de l'element anterior determinaran la posició de l'element següent.

Obriu l'arxiu position2.html i comproveu que els quatre paràgrafs es posicionen seguint el flux normal de posicionament, ja que que tenen per defecte el valor estàtic de la propietat position.

absolut (absolut)

El valor absolut de la propietat position permet separar un element del flux normal de posicionament dels elements de la pàgina. En separar-se del flux normal, els valors de posició prendran com a referència d'origen la cantonada superior esquerra de la finestra del navegador, excepte en el cas que no es trobi ubicat dins d'un bloc amb posició relativa o absoluta.

Obriu l'arxiu position3.html i fixeu-vos en el comportament dels quatre elements a partir de les següents condicions:

• Els elements model_box_1 i model_box_2 es troben continguts a l'element #caixa1.
• L'element #caixa1 conté, seguint el flux normal de lectura dels elements, una capçalera de nivell 2 i els dos paràgrafs, model_box_3 i model_box_4.
• Fora de la caixa #caixa1 li segueixen dues caixes més, "model_box_3" i "model_box_4".

• Les propietats de la caixa #caixa1, en quant a posicionament, són les següents:

  	position: absolute;
  	top: 200px;
  	left: 30px;
  

  La seva posició és absoluta, per la qual cosa deixarà de seguir el flux normal de posicionament, ubicant-se a 200 px del marge superior i a 30 px del marge esquerre de la finestra del navegador. En aquest moment, les caixes dels paràgrafs model_box_3 i model_box_4 segueixen el flux normal de posicionament, ja que el seu posicionament és estàtic. Les caixes model_box_1 i model_box_2 i la capçalera de nivell 3 també segeuixen el flux normal, però contingudes a l'interior de la caixa #caixa1, allunyada del flux normal de posicionament en tenir un valor absolut de posicionament.

• Si a la caixa model_box_2 se li assigna un valor absolut, afegint les següents propietats a la regla .model_box_2:

  	position: absolute;
  	top: 0;
  	left: 0;
  

  Es desplaçarà a la cantonada superior esquerra de la caixa #caixa1, ja que, seguint una regla explicada anteriorment, tota caixa de posició absoluta continguda en una altra de posició absoluta prendrà com a punt d'origen de la seva ubicació la cantonada superior esquerra de la segona. D'altra banda, els altres dos elements, la capçalera de segon nivell i l'element .model_box1 mantenen el flux normal de posicionament.

• Per tal que la caixa model_box_3 actui en posicionamient absolut, s'han afegit les següents propietats a la regla .model_box_3:

  	position: absolute;
  	top: 120px;
  	right: 150px; 
  

  Podeu comprovar que salta el flux normal de posicionamient per ubicar-se 120px del marge superior i a 150px del marge dret del navegador. Si es redimensiona el navegador es veurà que la caixa mantindrà sempre el seu posicionament absolut.

  Finalment fixeu-vos que, la caixa model_box_4, l'última del flux normal al començament de l'exemple, ha passat a ser la única i la primera que el manté.

• Les caixes s'han superposat i es visualitzen en l'ordre en que es troben al document, però aquest ordre es pot alterar i determinar un nou ordre de visibilitat, amb la propietat z-index. Aquesta propietat proporciona el valor de l'ordre en profunditat de les caixes de posicionament absolut i fixe (fixed) -que es veurà a continuació-. Quan més gran és el valor, més pròxima es trobarà la caixa de l'usuari, és a dir, per sobre de la resta. Seguint amb l'exemple de l'arxiu position3.html, alterareu la posició en profunditat de dos elements de posicionament absolut:

  #caixa1 {
  	....
  	z-index: 10;
  }
  
  .model_box_3 {
  	...
  	z-index: 5;
  	}
  

Actaulitzeu la pàgina per veure com la #caixa1 queda superposada a l'element .model_box3.

Fix (fixed)

El valor "fixed" actua de la mateixa manera que el valor "absolute". L'única diferència es troba en que si els elements posicionats com a absoluts són desplaçats verticalment, en funció de la longitud del document, els elements de posicionament fix no queden afectats.

Si obriu l'arxiu position4.html, veureu que s'ha inclòs una imatge al final del cos del document:

<img class="fix" src="badget.png" />

La regla d'estil fix conté les següents propietats:

.fix {
	position: fixed;
	top: 20px;
	right: 175px;
}

Si augmenteu en 6 o 7 paràgrafs el contingut (podeu copiar i enganxar l'últim d'ells) l'element model_box_4, podreu comprovar que, en fer un scroll vertical de la pàgina, la imatge queda fixada a la seva posició.

Finalment, afegint la propietat z-index, donant-li un valor més gran que el de la #caixa1, la imatge serà sempre visible, perquè està situada per sobre de totes les altres:

.fixe {
	position: fixed;
	top: 20px;
	right: 175px;
	z-index: 20;
}

Relatiu (relative)

El valor relatiu de la propietat position indica un desplaçament de l'element en relació a la seva ubicació original. Un element al que se li assigna el valor de posició relatiu és un element ubicat en el flux normal de posicionament dels elements del document. Veieu el següent exemple obrint l'arxiu position5.html.

• S'ha afegit una nova regla: model_box_5 i s'associarà als diferents paràgrafs que mantenen el flux normal de posicionament.

  .model_box_5 {
  	font-family: verdana;
  	font-size: 80%;
  	margin:0px;
  	width: 300px;
  	padding: 5px;
  	background-color: #ddd;
  	color: #333;
  	}
  

  <p class="model_box_5">Lorem ipsum dolor sit amet, (...) Sed ut massa. </p>
  

• S'afegirà la següent propietat al model_box_4:

  	position: relative;
  	left: 50px;
  

  El model_box_4 es mantindrà en el flux normal, però desplaçat 50 píxels cap a la seva dreta.
• Es crea una regla per a tots els elements strong anidats als elements de classe model_box_4:

  .model_box_4  strong {
  	position: relative;
  	top: 0px;
  	left: 320px;
  	color: #333;
  }
  

  També s'ha assignat la propietat de posicionament relatiu al seu orígen, desplaçat 320 píxels a la dreta. Com es pot veure si s'actualitza la pàgina, l'element en línia strong quedarà separat de l'element contenidor, però això no vol dir que hagi deixat d'estar en el flux normal del document. Qualsevol modificació que es faci a l'element contenidor -model_box_4- també actuarà sobre ell.

• Finalment s'afegeix un valor de posicionament relatiu a l'element model_box_5:

  	position: relative;
  	top: 20px;
  	left:100px;
  

  el seu desplaçament pren com a punt de partida l'origen com a element de bloc que segeuix el flux de posicionament normal. Com ja passava en els apartats anteriors, es pot afegir la propiedat z-index per alterar la col·locació en profunditat dels elements.

  .model_box_4 {
  	font-family: verdana;
  	font-size: 80%;
  	margin:10px;
  	width: 300px;
  	padding: 5px;
  	background-color: #2a2a2a;
  	color: #fff;
  	position: relative;
  	left:50px;
  	z-index: 1;
  	}
  
  .model_box_5 {
  	font-family: verdana;
  	font-size: 80%;
  	margin:0px;
  	width: 300px;
  	padding: 5px;
  	background-color: #ddd;
  	color: #333;
  	position: relative;
  	top: 20px;
  	left:100px;
  	z-index: 9;
  	}
  

  El resultat d'un valor més gran del z-index de l'element model_box_5 al del model_box_4 obliga a modificar la visibilitat en profunditat dels elements, tal com es pot veure a l'arxiu position5.html.

A la pràctica següent es veurà com es comporten els elements en posicionament flotant i una aproximació als possibles models o esquemes visuals del document.

Tornar a l'inici de la pràctica