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

De Cacauet Wiki
Salta a la navegació Salta a la cerca
(alineacions)
Línia 89: Línia 89:
 
|}
 
|}
  
<br>
+
 
 +
 
 +
Per [http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ centrar en mode fixed de manera exacta podeu llegir aquest article].

Revisió del 19:01, 5 març 2011

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%;


Per centrar en mode fixed de manera exacta podeu llegir aquest article.