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

Revisió del 18:58, 5 març 2011

En CSS podem trobar diferents tipus de posicionament:

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

@@ Línia 28: / Línia 28: @@
 | ''position: static;''<br>
 |
-margin: ...;
+ margin: 10% 2em 20px 10px;
-margin-left: ...; margin-right: ...; margin-top: ...; margin-bottom: ...;<br>
+Seria equivalent a:
+ margin-top: 10%;
+ margin-right: 2em;
+ margin-bottom: 20px;
+ margin-left: 10px;
 |-
@@ Línia 51: / Línia 56: @@
 |
-top: 10px;
+top, bottom, left, right.
-bottom:&nbsp; 2em;
+Només s'ha d'utilitzar 2 alhora (1vert + 1horitz).
-left: 100px;
+ top: 10px;
+ right: 5em;
-right: 5em;
+ bottom:&nbsp; 2em;
+ left: 100px;
 |-
@@ Línia 72: / Línia 79: @@
 | Posició fixa al navegador, no es mourà inclús si fem un ''scroll''. S'utilitza típicament per fer aparèixer finestres emergents.<br>
 | ''position: fixed;''
-| <br>
+|
+left, right, top, bottom.
+Per centrar:
+ left: 50%;
+ top: 50%;
 |}
 <br>