Diferència entre revisions de la pàgina «CSS posicionament»

De Cacauet Wiki
Salta a la navegació Salta a la cerca
Línia 1: Línia 1:
 
En CSS podem trobar diferents tipus de posicionament:  
 
En CSS podem trobar diferents tipus de posicionament:  
  
*Normal  
+
*Normal (static)
 
*Absolut  
 
*Absolut  
 
*Flotant
 
*Flotant
Línia 19: Línia 19:
 
! scope="col" | Propietats CSS per alineació<br>
 
! scope="col" | Propietats CSS per alineació<br>
 
|-
 
|-
! scope="row" | Normal<br>  
+
! scope="row" | Normal (estàtic)<br>  
 
|  
 
|  
 
Segueix el que s'anomena '''"flux normal del text"''':&nbsp;d'esquerra a dreta i de dalt a baix.<br>  
 
Segueix el que s'anomena '''"flux normal del text"''':&nbsp;d'esquerra a dreta i de dalt a baix.<br>  
Línia 25: Línia 25:
 
Un bloc ocupa tota l'amplada del seu contenidor.  
 
Un bloc ocupa tota l'amplada del seu contenidor.  
  
| ''position: normal;''<br>  
+
| ''position: static;''<br>  
 
|  
 
|  
 
margin: ...;  
 
margin: ...;  

Revisió del 13:24, 5 març 2011

En CSS podem trobar diferents tipus de posicionament:

  • Normal (static)
  • Absolut
  • Flotant


Modes de poscionament

Mode de

posicionament

Descripció
Propietat  CSS mode
Propietats CSS per alineació
Normal (estàtic)

Segueix el que s'anomena "flux normal del text": d'esquerra a dreta i de dalt a baix.

Un bloc ocupa tota l'amplada del seu contenidor.

position: static;

margin: ...;

margin-left: ...; margin-right: ...; margin-top: ...; margin-bottom: ...;

Absolut

Es poden posicionar els blocs de manera absoluta respecte del contenidor.

El bloc contenidor portarà la propietat "relative".

El bloc a alinear portarà l

BLOC:

position: absolute;

CONTENIDOR:

position: relative;

top: 10px;

bottom:  2em;

left: 100px;

right: 5em;

Flotant
Per alinear blocs al voltant del text.

float: left;

float: right;