Positionnement

1) position: static

Valeur par défaut. L’élément reste dans le flux naturel et ne peut pas être déplacé avec top, left, right ou bottom.

.box {
  position: static;
}

2) position: relative

L’élément reste dans le flux mais peut être décalé visuellement. Il garde son espace d’origine et peut servir de référence pour un enfant en absolute.

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

3) position: absolute

L’élément est retiré du flux et se positionne par rapport au premier parent positionné (relative, absolute, fixed, sticky). Sinon, il se positionne par rapport au viewport.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

4) position: fixed

L’élément est fixé par rapport au viewport et reste visible même lors du défilement.

.menu {
  position: fixed;
  top: 0;
  left: 0;
}

5) position: sticky

L’élément se comporte comme un élément normal (static) jusqu’à ce qu’il atteigne une position définie (top, left, etc.). Une fois ce seuil atteint, il devient fixe et reste collé à cette position tant que son parent est visible.

.header {
  position: sticky;
  top: 0;
}

Résumé

static : reste dans le flux, comportement normal

relative : reste dans le flux, peut être décalé

absolute : retiré du flux, dépend d’un parent positionné

fixed : retiré du flux, fixé à l’écran

sticky : entre static et fixed selon le scroll

Propriétés accessibles lorsqu'un élément est positionné

Prenons la feuille de styles suivantes pour illustrer ces propriétés

        /* --- EXEMPLES DE POSITIONNEMENT --- */

        .ex-top {
            position: relative;
            top: 20px;
            background: lightblue;
        }

        .ex-right {
            position: relative;
            right: 20px;
            background: lightgreen;
        }

        .ex-bottom {
            position: relative;
            bottom: 20px;
            background: lightcoral;
        }

        .ex-left {
            position: relative;
            left: 20px;
            background: khaki;
        }

        .ex-z1 {
            position: relative;
            z-index: 1;
            background: gray;
        }

        .ex-z2 {
            position: relative;
            z-index: 2;
            background: orange;
        }

        .ex-transform {
            position: relative;
            transform: translateX(30px);
            background: plum;
        }

        .ex-clip {
            position: relative;
            clip-path: circle(40%);
            background: teal;
            width: 120px;
            height: 120px;
        }

        .demo {
            padding: 10px;
            margin: 10px 0;
        }

Lorsqu'un élément utilise position: relative, absolute, fixed ou sticky, il peut utiliser les propriétés suivantes :

1. top

Déplace l’élément vers le bas à partir du haut du conteneur.

<div class="demo ex-top">Exemple avec top: 20px</div>
    

2. right

Déplace l’élément vers la gauche à partir du bord droit.

<div class="demo ex-right">Exemple avec right: 20px</div>
    

3. bottom

Déplace l’élément vers le haut à partir du bas du conteneur.

<div class="demo ex-bottom">Exemple avec bottom: 20px</div>
    

4. left

Déplace l’élément vers la droite à partir du bord gauche.

<div class="demo ex-left">Exemple avec left: 20px</div>
    

5. z-index

Détermine quel élément passe au-dessus des autres.

<div class="demo ex-z2">Élément au-dessus (z-index: 2)</div>
<div class="demo ex-z1">Élément en dessous (z-index: 1)</div>
    

6. transform

Permet de déplacer, tourner ou agrandir l’élément.

<div class="demo ex-transform">Exemple avec transform: translateX(30px)</div>
    

7. clip-path

Découpe visuellement l’élément.

<div class="demo ex-clip"></div>