Positionnement CSS en moins de 10 leçons

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 il 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 placé à 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.

Note:

• BUG IE6 si vous spécifiez une largeur relative (comme "width: 50%") alors la largeur sera basé sur l'élément parent au lieu de l'être sur l'élément l'élément positionné..

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 à 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. deux colonnes avec 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. deux colonnes avec absolute et une hauteur fixée

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

Mais ce n'est pas une solution viable pour la plupart des développements , 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 utiliser une autre solution.

On met alors l'élément en "float" pour le repousser le plus possible à gauche ou à 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. colonnes avec float

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. deux colonnes avec float et 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;
}

On a dit MOINS de 10 leçons !!!