CSS posicionament

De Cacauet Wiki
La revisió el 18:58, 5 març 2011 per Enric (discussió | contribucions) (alineacions)
Salta a la navegació Salta a la cerca

En CSS podem trobar diferents tipus de posicionament:

  • Normal (static)
  • Absolut
  • Flotant
  • Fix


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: 10% 2em 20px 10px; 

Seria equivalent a:

margin-top: 10%; 
margin-right: 2em; 
margin-bottom: 20px;
margin-left: 10px;
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, bottom, left, right.

Només s'ha d'utilitzar 2 alhora (1vert + 1horitz).

top: 10px; 
right: 5em; 
bottom:  2em; 
left: 100px; 
Flotant
Per alinear blocs al voltant del text.

float: left;

float: right;


Fix
Posició fixa al navegador, no es mourà inclús si fem un scroll. S'utilitza típicament per fer aparèixer finestres emergents.
position: fixed;

left, right, top, bottom.

Per centrar:

left: 50%;
top: 50%;