CSS
Positionnement

Syntaxe

• position: static | absolute | fixed | relative | sticky | initial | inherit | unset;
• z-index: auto | nombre | initial | hériter;

Paramètres

Remarques

Emploi stable

En définissant la position comme fixe, nous pouvons supprimer un élément du flux de documents et définir sa position par rapport à la fenêtre du navigateur. Une utilisation évidente est lorsque nous voulons que quelque chose soit visible lorsque nous faisons défiler vers le bas d'une longue page.

#stickyDiv {
    position:fixed;
    top:10px;
    left:10px;
}

Éléments superposés avec z-index

Pour modifier les éléments positionnés par ordre de pile par défaut (la propriété de position définie sur relative , absolute ou fixed ), utilisez la propriété z-index .

Plus le z-index est élevé, plus il est placé dans le contexte d'empilement (sur l'axe des z).

Exemple

Dans l'exemple ci-dessous, un z-index de 3 met le vert en haut, un z-index de 2 met le rouge juste en dessous et un z-index de 1 met le bleu en dessous.

HTML

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

CSS

div {
    position: absolute;
    height: 200px;
    width: 200px;
}
div#div1 {
    z-index: 1;
    left: 0px;
    top: 0px;
    background-color: blue;
}
div#div2 {
    z-index: 3;
    left: 100px;
    top: 100px;
    background-color: green;
}
div#div3 {
    z-index: 2;
    left: 50px;
    top: 150px;
    background-color: red;
}

Cela crée l'effet suivant:

Voir un exemple de travail à JSFiddle .

Syntaxe

z-index: [ number ] | auto;

Remarques

Tous les éléments sont disposés dans un axe 3D en CSS, y compris un axe de profondeur, mesuré par la propriété z-index . z-index ne fonctionne que sur les éléments positionnés: (voir: Pourquoi z-index nécessite-t-il une position définie pour fonctionner? ). La seule valeur ignorée est la valeur par défaut, static .

Lisez la propriété z-index et les contextes d'empilement dans la spécification CSS sur la présentation en couches et sur le réseau de développeurs Mozilla .

Position relative

Le positionnement relatif déplace l'élément par rapport à l'endroit où il se serait trouvé dans les propriétés normales .Offset:

1. Haut
2. la gauche
3. droite
4. bas

sont utilisés pour indiquer dans quelle mesure déplacer l'élément à partir duquel il se serait trouvé dans un flux normal.

.relpos{
    position:relative;
    top:20px;
    left:30px;
}

Ce code va déplacer la case contenant l'élément avec l'attribut class = "relpos" de 20px vers le bas et 30px vers la droite d'où il aurait été dans un flux normal.

Position absolue

Lorsque le positionnement absolu est utilisé, la case de l'élément souhaité est retirée du flux normal et n'affecte plus la position des autres éléments de la page. Propriétés de décalage:

1. Haut
2. la gauche
3. droite
4. bas

spécifie que l'élément doit apparaître par rapport à son élément contenant non statique suivant.

.abspos{
    position:absolute;
    top:0px;
    left:500px;
}    

Ce code va déplacer la boîte contenant l'élément avec l'attribut class="abspos" vers le bas 0px et à droite 500px par rapport à son élément contenant.

Positionnement statique

La position par défaut d'un élément est static . Pour citer MDN :

Ce mot-clé permet à l'élément d'utiliser le comportement normal, c'est-à-dire qu'il est disposé dans sa position actuelle dans le flux. Les propriétés top, right, bottom, left et z-index ne s'appliquent pas.

.element{
  position:static;
}