Positionement CSS en moins de 10 lecons

1. position:static

Le positionnement par défaut de tous les élément est : position:static, qui signifie que l'élément n'est pas explicitement positionné et apparaît là ou il doit normalement apparaître dans le document.

Normalement vous n'avez pas à le spécifier sauf pour remplacer un positionnement qui a été mis précédemment.

#div-1 {
 position:static;
}

2. position:relative

Si vous spécifier position:relative, alors vous pouvez utilisez top ou bottom, et left ou right pour déplacer les éléments relativement a l'endroit ou ils devraient normalement se trouver dans le document.

Déplaçons div-1 vers le bas de 20 pixels, et vers la gauche de 40 pixels:

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

Remarquez que l'espace ou div-1 aurait du être si nous ne l'avions pas déplacer est maintenant un espace vide. L'élément suivant (div-after) ne bouge pas quand nous déplaçons div-1. En fait div-1 occupe encore l'espace original dans le document.

Il semble que position:relative ne soit pas vraiment utile mais it pourra l'être pour certaines présentation que nous verrons plus tard.

3. position:absolute

Si on spécifie position:absolute, l'élément est retiré du document et placer a l'endroit exact ou vous le demandez.

Déplaçons div-1a dans le coins supérieur droit de la page:

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

Remarquez que cette fois comme div-1a est enlevé du document, les autres éléments de la page sont positionnés différemment ici div-1b, div-1c, et div-after remontent puisque div-1a n'est plus la

Remarquez aussi que le fait de positionner les choses de manière absolues dans la page comme div-1a en haut à droite n'est pas suffisant. On aimerait un positionnement de div-1a relativement à div-1. c'est le retour des positions relatives.

Footnotes

• BUG IE : There is a bug in the Windows IE browser: if you specify a relative width (like "width:50%") then the width will be based on the parent element instead of on the positioning element.

4. position:relative + position:absolute

Si on choisi un positionnement relative pour div-1, tout les éléments qu'il contient seront positionnés relativement a div-1. Si on met alors un positionnement absolu sur div-1a, nous pouvons le déplacer dans le coin supérieur droit de dvi-1:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

5. two column absolute

On montre maintenant comment faire une mise en page sur 2 colonnes en utilisant relative et absolute

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

Un des avantage d'utiliser du positionnement absolu est qu'on peut positionner les éléments dans n'importe quel ordre sans tenir compte de l'ordre ou ils apparaissent dans le html. Ici div-1b est avant div-1a.

Mais qu'est il arrivé aux autres éléments ? Il sont remontés et sont donc masqués par le positionnement absolu. Voyons comment éviter cela

6. two column absolute height

Une solution est de mettre une hauteur fixe aux 2 éléments

Mais ce n'est pas une solution viable pour la plupart des designes, car nous ne savons généralement pas quelle quantité de texte il y aura dans l'élément ou les fontes exactes qui seront utilisées.

#div-1 {
 position:relative;
 height:250px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

7. float

Pour des colonnes de hauteur variable le positionnement absolu ne marche pas nous devons donc utilise une autre solution.

On met alors l'élément en "float" pour le repousser le plus possible a gauche ou a droite et permettre au texte de l'enrober. C'est typiquement utiliser pour les images mais nous allons l'utiliser de façon plus complexe.

#div-1a {
 float:left;
 width:200px;
}

8. float columns

Si on "float" une colonne à gauche puis une autre colonne à gauche elle vont se coller l'une à l'autre.

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

9. float columns with clear

Après les éléments flottants, on peut nettoyer (clear) le flaot pour que le reste s'affiche.

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}

C'est fini !!!