Positions

Le mot-clé position en CSS est un faux-ami. Sa valeur permet de définir le comportement de mise en page d’un élément au sein de la page et sa relation aux éléments qui l’entourent (éléments parents, enfants et frères (siblings).

↪ Accéder au playground sur Codepen.

Static

Par défaut (tant qu’on ne l’a pas modifiée), la position d’un élément est static.

#static {
    position:static;
}

On dit d’un élément auquel est affecté une position autre que static qu’il est positionné.

Fixed

La position fixed permet de définir la position d’un élément par rapprort au viewport, l’espace visible de la fenêtre du navigateur. Il permet d’utiliser les propriétés top, right, bottom ou left. Voici le code qui correspond au carré noir en bas de page :

#fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 20px;
    height:20px;
    background:black;
}

Bien que particulièrement utile, cette propriété peut être gênante sur mobiles (si l’élément fixed est trop grand).

Sticky

Avec la position sticky l'élément sera naturellement soumis au scroll du document, mais une fois qu'il a atteint un certain point par rapport à la fenêtre, il se met à « coller » et se comporte comme position: fixed. Exemple avec le carré vert à droite.

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

Relative

La valeur relative est un outil très puissant pour la mise en page. Elle permet plusieurs comportements :

Sans autre règle, la position relative semble être strictement identique au positionnement static. La position de l’élément peut être modifiée par les propriétés top, right, bottom ou left relativement à sa position d’origine.

La position relative est particulièrement utile pour créer un nouveau référenciel de positionnement pour les éléments positionnés en absolute :

Absolute

La position absolute permet de positionner un élément en supprimant l’impact qu’il a sur ses autres éléments parents et frères. L’élément positionné par le code CSS suivant se trouve tout en haut de la page.

#absolute {
    position:absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height:20px;
    background:black;
}

Cette position s’établit en effet par rapport au document ou au premier élément parent dont la position est relative.

.box {
    position:relative
}
#absolute-2 {
    position:absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height:20px;
    background:FireBrick;
}
    

→ la mise en page

—

Contenu adapté de Jeremy Thomas et Louis Éveillard, sous license CC BY-NC-SA 4.0.