Les éléments positionnés - FAQ CSS

Introduction aux éléments positionnés

Vous trouverez diverses questions sur les feuilles de style css pour la présentation des blocs (calque, layer), position, visibilité.

Comment positionner un élément?

Principe de base pour créer un élément positionné

Vous pouvez en feuille de style css positionner presque toutes les balises HTML ou XHTML.
Pour cela, vous devez d'abord spécifier la règle du positionnement avec la propriété CSS position, c'est-à-dire spécifier le contexte de positionnement qui définit les points d'origines des nouvelles positions de l'élément.

Code CSS :

position:absolute;
/*ou*/
position:fixed;
/*ou*/
position:relative;

schémat des points de positionnement Dans un deuxième temps, vous devez spécifier la nouvelle position d'un ou des "côtés" de l'élément que vous voulez positionner. J'appelle ces "côtés" : points de positionnements.

Code CSS :

bottom : 10em; right : 10em;
/*ou*/
top : 10px; left : 10px;

Le point de positionnement gauche est spécifié avec la propriété CSS left.
Le point de positionnement droit est spécifié avec la propriété CSS right.
Le point de positionnement bas est spécifié avec la propriété CSS bottom.
Le point de positionnement haut est spécifié avec la propriété CSS top.

Petit rappel, les points de positionnement d'un élément prennent en compte la taille de la marge extérieure.

Règle du positionnement

Trois types de contextes de positionnement

Il existe pour le moment trois règles de positionnement introduites avec la propriété position CSS:

absolute : par défaut, l'élément servant contexte de positionnement est la zone de contenu visible de la fenêtre du navigateur (body). La position est donc variable pour bottom et right si par exemple vous réduisez la taille de la fenêtre ou au chargement suivant la taille de la fenêtre.
L'élément repositionné sort du flux normal.
fixed : l'élément servant de contexte de positionnement est la zone de contenu visible de la fenêtre du navigateur (body). La position est donc variable pour bottom et right si par exemple vous réduisez la taille de la fenêtre ou au chargement suivant la taille de la fenêtre.
Contrairement absolute l'élément reste visuellement au même endroit quand on utilise les scrollbarre.
L'élément repositionné sort du flux normal.
Cas particulier : si le contexte de positionnement est créé par la propriété Css transform, alors fixed se comporte comme absolute.
relative : l'élément servant de contexte de positionnement est lui-même.
L'élément repositionné reste dans le flux normal, c'est-à-dire que l'espace utilisé de l'élément avant repositionnement est présent.

Le point de départ du positionnement absolute ou fixed

Où se situe le point d'origine?

schéma des parents en position static Un élément dit positionné en absolute ou fixed aura comme contexte de positionnement, le premier parent ayant une propriété position Css différente de static, soit à ce jour fixed, relative ou absolute, ou ayant une propriété transform, perspective ou filter. Les bordures de ce parent faisant office contexte de positionnement, serviront de point de départ du positionnement de top, bottom, left ou right.
Si aucune propriété Css position n'est trouvée, alors le contexte de positionnement est la fenêtre pour fixed ou soit le début de la page body.

Exemple de code CSS et HTML :

<style type="text/css">
#origine{
  border:1px solid red; width:250px; height:250px; padding:20px;
  overflow:hidden;
  position:relative;
}
#position{
  border:1px solid green; width:120px; height:120px;
  position:absolute;
  bottom:-15px
}
</style>
<div id="origine">
  <div id="position"></div>
</div>

top ou bottom, left ou right, qui prend le dessus?

Règles d'interprétations top et bottom

Si la propriété Css height est spécifiée* (* autre que auto) et que la propriété CSS bottom et top sont déclarées* (* autre que auto), c'est top qui est appliquée.
Autres cas :

top a une valeur de auto et bottom a une valeur précisée* et que height est spécifiée*, alors c'est bottom qui est appliquée.
top et bottom ont une valeur précisée* et que height a une valeur de auto, les deux sont appliqués.
si la propriété Css writing-mode a une valeur héritée de vertical-rl, alors les règles s'inversent.

Règles d'interprétations left et right

Si la propriété Css width est spécifiée* (* autre que auto) et que la propriété CSS left et right sont déclarées* (* autre que auto), c'est left qui est appliquée.
Autres Cas :

left a une valeur de auto et right a une valeur précisée* et que width est spécifiée*, alors c'est left qui est appliquée.
right et left ont une valeur spécifiée et que width a une valeur de auto, les deux sont appliqués.
si la propriété Css direction a une valeur héritée de rtl, alors les règles s'inversent. unicode-bidi peut aussi influencer les règles.

Définir l'ordre d'empilement z-index

Règles principales de la profondeur

Quand plusieurs éléments ont une propriété CSS position autre que static ou ayant une propriété transform, vous pouvez spécifier l'ordre d'empilement les un par rapport aux autres.
Pour cela, vous devez utilise la propriété CSS z-index.

L'ordre d'empilement par défaut

Par défaut, l'ordre d'empilement pour les éléments n'ayant pas de propriété CSS z-index ou un z-index:auto est déterminé par l'ordre des éléments dans le code HTML.
L'élément déclaré en premier sera au-dessous de l'élément suivant et aussi de suite.
Prenons l'exemple suivant :

les calques* sont en position:absolute;top:0;left:0, z-index non spécifié.

Code HTML pour l'exemple :

<div id="calque1"></div>
<div id="calque2"></div>
<div id="calque3"></div>

L'ordre d'empilement est le suivant :

calque3 est au-dessus de calque2 et calque3 est au-dessus de calque1.
calque2 est au-dessus de calque1.

A partir du moment ou vous allez spécifier un z-index > 0 à un élément, ce dernier sera au-dessus des éléments dont l'ordre d'empilement a été déterminé par défaut. Son ordre d'empilement dépendra à partir de ce moment-là de son contexte d'empilement.

Le contexte d'empilement

L'ordre d'empilement se fait toujours au sein d'un contexte d'empilement. Un élément devient contexte d'empilement s'il a une propriété z-index ayant pour valeur un nombre (par défaut c'est le document).
Prenons l'exemple suivant :

les calques* sont en position:absolute;top:0;left:0.
les calque1 et calque1-1 sont en z-index:1.
le calque2 est en z-index:2.
calque1-1 sont en z-index:2.
calque1-2 sont en z-index:3.

Code HTML pour l'exemple :

<body>
  <div id="calque1">
    <div id="calque1-1"></div>
    <div id="calque1-2"></div>
  </div>
  <div id="calque2">
    <div id="calque2-1"></div>
    <div id="calque2-2"></div>
  </div>
</body>

Le contexte d'empilement pour chaque élément :

Les calque1 et calque2 ont pour contexte d'empilement body.
Les calque1-* ont pour contexte d'empilement calque1.
Les calque2-* ont pour contexte d'empilement calque2.

Le calque2-1 et calque2-2 quelle que soit la valeur de z-index, ne seront jamais au-dessus de calque1-1 car calque1 est au-dessus de calque2.
Inversement le calque1-1 et calque1-2 quelle que soit la valeur de z-index, ne seront jamais au-dessus de calque2-1 car calque2 est au-dessus de calque1.

Prenons maintenant l'exemple suivant :

supprimer les z-index de calque2 et calque1.

Le contexte d'empilement pour chaque élément :

Les calque* et calque*-* ont maintenant pour contexte d'empilement body.

Le calque2-* et calque1-* pourront se chevaucher dans n'importe quel ordre.

Exemples d'éléments positionnés

Codes css

Le code CSS :

.cadre-exemple{
  position:relative;
  border:1px solid #ddd;
  height:150px;
  width:150px;
}
#exemple1 .defaut{
  position:absolute; 
  top:0;
  left:0;
  height:150px;
  width:150px;
}
#exemple1 #calque1{
  background:green; 
  height:150px;
  width:25px;
  -z-index:1; 
}
#exemple1 #calque1-1{
  height:125px;
  width:50px;
  background:#3F0;
  z-index:1; 
  left:30px;
  top:10px;
}
#exemple1 #calque1-2{
  height:100px;
  width:75px;
  background:#6FF;
  z-index:4; 
  left:40px;
  top:20px;
}
#exemple1 #calque2{
  background:red; 
  height:75px;
  width:100px;
  -z-index:2;  
  left:10px;
  top:10px;
}
#exemple1 #calque2-1{
  background:#F60;
  z-index:2;
  height:50px;
  width:125px; 
  left:20px;
  top:30px;
}
#exemple1 #calque2-2{
  background:#F90;
  z-index:3;
  height:25px;
  width:100px; 
  left:10px;
  top:40px;
}

Le code HTML ou XHTML :

<div class="cadre-exemple" id="exemple1">
  <div id="calque1" class="defaut">
    <div id="calque1-1" class="defaut"></div>
    <div id="calque1-2" class="defaut"></div>
  </div>
  <div id="calque2" class="defaut">
    <div id="calque2-1" class="defaut"></div>
    <div id="calque2-2" class="defaut"></div>
  </div>
</div>

Définitions annexes

Définitions CSS annexes

bottom: La propriété de Position CSS BOTTOM permet de spécifier la position du bord bas de la marge d'un élément positionné par rapport au bord bas de son par...[ bottom ]
clip: La propriété CSS CLIP permet de recadrer un élément positionné avec position et dont la valeur est absolute.Exemple d'écriture CSS de clip .identifian...[ clip ]
direction: La propriété CSS DIRECTION permet de gérer le sens ou direction de l'écriture des blocs et le sens des incorporations et contraintes pour l'algorithme...[ direction ]
filter: La propriété de Filtre CSS FILTER permet de spécifier une/des fonctions de Filtre CSS qui correspondront au divers effets à appliquer sur un élément H...[ filter ]
height: La propriété de Hauteur CSS HEIGHT permet de spécifier la hauteur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS...[ height ]
left: La propriété de Position CSS LEFT permet de spécifier la position du bord gauche de la marge d'un élément positionné par rapport au bord gauche de son...[ left ]
perspective: La propriété de Transformation CSS 3D PERSPECTIVE permet d'activer perspective en spécifiant la distance entre "le point de vue" virtuel et le point d...[ perspective ]
perspective(): La fonction de Perspective CSS perspective(Z) de la propriété de Transformation CSS transform permet de spécifier la distance entre "le point de vue" ...[ perspective() ]
position: La propriété de Position CSS POSITION permet de spécifier si un élément est positionné ou pas et spécifie par la même occasion son type de positionnem...[ position ]
right: La propriété de Position CSS RIGHT permet de spécifier la position du bord droit de la marge d'un élément positionné par rapport au bord droit de son ...[ right ]
top: La propriété de Position CSS TOP permet de spécifier la position du bord haut de la marge d'un élément positionné par rapport au bord haut de son pare...[ top ]
transform: La propriété de Transformation CSS TRANSFORM permet de spécifier le type de transformation 2d ou 3d à appliquer sur un élément HTML.Exemple d'écriture...[ transform ]
unicode-bidi: La propriété CSS UNICODE-BIDI permet de spécifier le sens des incorporations et contraintes pour l'algorithme bi-directionnel Unicode.Exemple d'écritu...[ unicode-bidi ]
width: La propriété de Longueur CSS WIDTH permet de spécifier la longueur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CS...[ width ]
writing-mode: La propriété CSS WRITING-MODE permet la gestion des modes d'écritures internationaux en spécifiant le sens de l'affichage horizontal ou vertical du te...[ writing-mode ]
z-index: Z-INDEX CSS est propriété qui permet de spécifier la position d'empilement (notion de profondeur) d'un élément positionné par rapport aux autres éléme...[ z-index ]

Définitions HTML annexes

body: La balise HTML et XHTML BODY contient le corps du document html, c'est à dire toutes les informations visibles par l'internaute.<BODY> </BODY> C'est u...[ body ]