Le positionnement

Le positionnement permet de sortir les éléments du flux normal de la composition du document, et de les faire se comporter différemment, par exemple en plaçant un élément sur un autre ou en occupant toujours la même place dans la zone d'affichage du navigateur. Cet article explique les diverses valeurs de position, et comment les utiliser.

Prérequis : Structurer le contenu avec HTML, Bases du style CSS, Fondamentaux du style et des polices de texte, être familiarisé avec les Concepts fondamentaux de la mise en page CSS.

Objectifs d'apprentissage :

Prérequis :	Structurer le contenu avec HTML, Bases du style CSS, Fondamentaux du style et des polices de texte, être familiarisé avec les Concepts fondamentaux de la mise en page CSS.
Objectifs d'apprentissage :	Le positionnement `static` est la façon par défaut dont les éléments sont positionnés sur la page. Les éléments positionnés relativement restent dans le flux normal, mais le positionnement absolu (ainsi que fixe/adhérent) retire complètement les éléments du flux normal pour les placer sur un calque séparé. La position finale dans la mise en page peut être modifiée à l'aide des propriétés `top`, `bottom`, `left` et `right`, mais leurs effets diffèrent selon la valeur de `position` définie. Définir le contexte de positionnement d'un élément positionné par rapport à un élément parent.

Le positionnement static est la façon par défaut dont les éléments sont positionnés sur la page.
Les éléments positionnés relativement restent dans le flux normal, mais le positionnement absolu (ainsi que fixe/adhérent) retire complètement les éléments du flux normal pour les placer sur un calque séparé.
La position finale dans la mise en page peut être modifiée à l'aide des propriétés top, bottom, left et right, mais leurs effets diffèrent selon la valeur de position définie.
Définir le contexte de positionnement d'un élément positionné par rapport à un élément parent.

Travailler au travers des exercices

Nous vous invitons à réaliser les exercices suivants sur votre ordinateur local. Pour commencer, créez un nouveau fichier HTML sur votre système local et ajoutez-y le contenu suivant :

html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Exemple de positionnement</title>

    <style>
      body {
        width: 500px;
        margin: 0 auto;
      }

      p {
        background: aqua;
        border: 3px solid blue;
        padding: 10px;
        margin: 10px;
      }

      span {
        background: red;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>Flux de document de base</h1>

    <p>
      Je suis un élément de niveau bloc de base. Mes éléments adjacents de
      niveau bloc se trouvent sur de nouvelles lignes en dessous de moi.
    </p>

    <p>
      Par défaut, nous occupons 100% de la largeur de notre élément parent, et
      notre hauteur est aussi grande que le contenu de nos enfants. Notre
      largeur et hauteur totales correspondent à notre contenu + le remplissage
      + la largeur/hauteur des bordures.
    </p>

    <p>
      Nous sommes séparés par nos marges. En raison de la fusion des marges,
      nous sommes séparés par la largeur de l'une de nos marges, et non par les
      deux.
    </p>

    <p>
      les éléments en incise <span>comme celui-ci</span> et
      <span>celui-là</span> se trouvent sur la même ligne les uns que les
      autres, ainsi que les nœuds de texte adjacents, s'il y a de la place sur
      la même ligne. Les éléments en incise qui débordent
      <span>
        passez à une nouvelle ligne si possible — comme celle-ci qui contient du
        texte </span
      >, ou passez simplement à une nouvelle ligne si ce n'est pas le cas, un
      peu comme le fait cette image&nbsp;:
      <img
        src="https://mdn.github.io/shared-assets/images/examples/long.jpg"
        alt="un extrait large mais court d'une photo montrant plusieurs tissus" />
    </p>
  </body>
</html>

Introduction au positionnement

Le positionnement permet de modifier le cours classique de la mise en page pour produire des effets intéressants. Vous souhaitez modifier légèrement le placement de boîtes par rapport à leur position par défaut dans la mise en page, et donner ainsi une touche d'originalité à votre page ? Vous souhaitez créer un élément d'interface utilisateur flottant au‑dessus d'autres parties de la page, et/ou que cet élément reste fixé à la même place dans la fenêtre du navigateur, quel que soit le point de défilement de la page ? Le positionnement est l'outil qu'il vous faut, il rend de tels agencements possibles.

Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété position.

Positionnement statique

Le positionnement statique est celui reçu par défaut par chaque élément. Cela veut tout simplement dire « positionner l'élément selon le flux normal, rien de spécial à voir ici ».

Pour illustrer ce positionnement (et disposer d'exemple qui nous sert pour les prochaines sections), ajoutez tout d'abord une classe positionne pour le deuxième <p> dans le HTML :

html

<p class="positionne">…</p>

Puis ajoutez la règle suivante au bas de votre CSS :

<h1>Positionnement statique</h1>

<p>
  Je suis un élément de niveau bloc basique. Mes éléments de niveau bloc
  adjacents se trouvent sur de nouvelles lignes en dessous de moi.
</p>

<p class="positionne">
  Par défaut, nous occupons 100% de la largeur de notre élément parent, et nous
  sommes aussi hauts que notre contenu enfant. Notre largeur et hauteur totales
  sont notre contenu + le remplissage + la largeur/hauteur de la bordure.
</p>

<p>
  Nous sommes séparés par nos marges. En raison de la fusion des marges, nous
  sommes séparés par la largeur d'une seule de nos marges, et non des deux.
</p>

<p>
  les éléments en incise <span>comme celui-ci</span> et <span>celui-là</span> se
  trouvent sur la même ligne les uns que les autres, ainsi que les nœuds de
  texte adjacents, s'il y a de l'espace sur la même ligne. Les éléments en
  incise qui débordent
  <span>
    passent à une nouvelle ligne si possible — comme celui-ci contenant du texte </span
  >, ou vont simplement sur une nouvelle ligne sinon, un peu comme le fait cette
  image&nbsp;:
  <img
    src="https://mdn.github.io/shared-assets/images/examples/long.jpg"
    alt="un extrait large mais court d'une photo montrant plusieurs tissus" />
</p>

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

css

.positionne {
  position: static;
  background: yellow;
}

Si vous sauvegardez et actualisez, vous ne voyez aucune différence, à l'exception de la mise à jour de la couleur de fond du deuxième paragraphe. L'exemple doit ressembler à ceci :

C'est correct — comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut !

Positionnement relatif

Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pouvez modifier sa position finale. Vous pouvez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de position dans le code :

css

.positionne {
  position: relative;
  background: yellow;
}

Si vous sauvegardez et actualisez à ce stade, vous ne voyez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés top, bottom, left et right dont nous parlons dans le prochain paragraphe.

Présentation de `top`, `bottom`, `left` et `right`

top, bottom, left et right sont utilisés conjointement à position pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle .positionne dans le CSS :

css

.positionne {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

Note : Les valeurs de ces propriétés peuvent prendre n'importe quelle unité logiquement attendue ici : pixels, mm, rem, %, etc.

Si vous enregistrez et actualisez maintenant, vous voyez ce résultat :

<h1>Positionnement relatif</h1>

<p>
  Je suis un élément de niveau bloc basique. Mes éléments de niveau bloc
  adjacents se trouvent sur de nouvelles lignes en dessous de moi.
</p>

<p class="positionne">
  Par défaut, nous occupons 100% de la largeur de notre élément parent, et nous
  sommes aussi hauts que notre contenu enfant. Notre largeur et hauteur totales
  sont notre contenu + le remplissage + la largeur/hauteur de la bordure.
</p>

<p>
  Nous sommes séparés par nos marges. En raison de la fusion des marges, nous
  sommes séparés par la largeur d'une seule de nos marges, et non des deux.
</p>

<p>
  les éléments en incise <span>comme celui-ci</span> et <span>celui-là</span> se
  trouvent sur la même ligne les uns que les autres, ainsi que les nœuds de
  texte adjacents, s'il y a de l'espace sur la même ligne. Les éléments en
  incise qui débordent
  <span>
    passent à une nouvelle ligne si possible — comme celui-ci contenant du texte </span
  >, ou vont simplement sur une nouvelle ligne sinon, un peu comme le fait cette
  image&nbsp;:
  <img
    src="https://mdn.github.io/shared-assets/images/examples/long.jpg"
    alt="un extrait large mais court d'une photo montrant plusieurs tissus" />
</p>

Cool, n'est-ce pas ? Oui, mais ce n'est probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini top (haut) et left (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté défini de l'élément à positionner, le déplaçant ainsi dans la direction opposée. Par exemple, si nous spécifions top: 30px;, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.

Positionnement absolu

Le positionnement absolu nous apporte des résultats bien différents.

Appliquer `position: absolute`

Modifions la déclaration de position dans le code :

css

.positionne {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaître :

<h1>Positionnement absolu</h1>

<p>
  Je suis un élément de niveau bloc basique. Mes éléments de niveau bloc
  adjacents se trouvent sur de nouvelles lignes en dessous de moi.
</p>

<p class="positionne">
  Par défaut, nous occupons 100% de la largeur de notre élément parent, et nous
  sommes aussi hauts que notre contenu enfant. Notre largeur et hauteur totales
  sont notre contenu + le remplissage + la largeur/hauteur de la bordure.
</p>

<p>
  Nous sommes séparés par nos marges. En raison de la fusion des marges, nous
  sommes séparés par la largeur d'une seule de nos marges, et non des deux.
</p>

<p>
  les éléments en incise <span>comme celui-ci</span> et <span>celui-là</span> se
  trouvent sur la même ligne les uns que les autres, ainsi que les nœuds de
  texte adjacents, s'il y a de l'espace sur la même ligne. Les éléments en
  incise qui débordent
  <span>
    passent à une nouvelle ligne si possible — comme celui-ci contenant du texte </span
  >, ou vont simplement sur une nouvelle ligne sinon, un peu comme le fait cette
  image&nbsp;:
  <img
    src="https://mdn.github.io/shared-assets/images/examples/long.jpg"
    alt="un extrait large mais court d'une photo montrant plusieurs tissus" />
</p>

Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existe plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des fenêtres intrusives (popup en anglais), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.

Ensuite, notez que la position de l'élément a changé. top, bottom, left et right se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur » (il s'agit dans ce cas, l'élément conteneur est le bloc conteneur initial, voir la section ci-dessous pour plus d'informations).

Note : Vous pouvez utiliser top, bottom, left et right pour redimensionner les éléments selon vos besoins. Définissez top: 0; bottom: 0; left: 0; right: 0; et margin: 0; sur les éléments à positionner et voyez ce qui se produit ! Réinitialisez le tout ensuite…

Note : Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.

Contextes de positionnement

Quel élément est « le conteneur » d'un élément positionné de manière absolue ? Cela dépend en grande partie de la propriété position des éléments qui sont les ancêtres de l'élément positionné (voir Identifier le bloc englobant).

Si aucun élément ancêtre ne voit sa propriété position explicitement définie, par défaut, tous les éléments ancêtres ont une position statique et par conséquent, l'élément positionné de façon absolue est contenu dans le bloc englobant initial. Ce bloc englobant initial a les dimensions de la zone d'affichage (viewport) et est aussi le bloc qui contient l'élément <html>. Autrement dit, l'élément positionné de façon absolue est affiché en dehors de l'élément <html> et positionné relativement à la zone d'affichage.

Dans la structure HTML, l'élément positionné est imbriqué dans l'élément HTML <body>, mais pour la disposition finale, il est situé à 30px du bord haut et du bord gauche de la page.

Vous pouvez modifier le contexte de positionnement, c'est-à-dire l'élément par rapport auquel l'élément est positionné de façon absolue. Pour cela, on définit le positionnement d'un des éléments ancêtres (les éléments dans lesquels il est imbriqué ; vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour voir cet effet, mettez à jour votre règle body pour définir position: relative dessus :

css

body {
  width: 500px;
  margin: 0 auto;
  position: relative;
}

Cela doit vous donner le résultat suivant :

<h1>Contextes de positionnement</h1>

<p>
  Je suis un élément de niveau bloc basique. Mes éléments de niveau bloc
  adjacents se trouvent sur de nouvelles lignes en dessous de moi.
</p>

<p class="positionne">
  Maintenant je suis positionné de façon absolue par rapport à l'élément
  <code>&lt;body&gt;</code> et non à l'élément <code>&lt;html&gt;</code>&nbsp;!
</p>

<p>
  Nous sommes séparés par nos marges. En raison de la fusion des marges, nous
  sommes séparés par la largeur d'une seule de nos marges, et non des deux.
</p>

<p>
  les éléments en incise <span>comme celui-ci</span> et <span>celui-là</span> se
  trouvent sur la même ligne les uns que les autres, ainsi que les nœuds de
  texte adjacents, s'il y a de l'espace sur la même ligne. Les éléments en
  incise qui débordent
  <span>
    passent à une nouvelle ligne si possible — comme celui-ci contenant du texte </span
  >, ou vont simplement sur une nouvelle ligne sinon, un peu comme le fait cette
  image&nbsp;:
  <img
    src="https://mdn.github.io/shared-assets/images/examples/long.jpg"
    alt="un extrait large mais court d'une photo montrant plusieurs tissus" />
</p>

body {
  width: 500px;
  margin: 0 auto;
  position: relative;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positionne {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

À présent, l'élément a été positionné par rapport à l'élément HTML <body>.

Introduction au `z-index`

Tout ce positionnement absolu est amusant, mais il y a autre chose que nous n'avons pas encore considéré : quand les éléments se chevauchent, comment est déterminé l'élément apparaissant au-dessus d'un autre ? Dans les exemples vus jusqu'à présent, nous n'avions qu'un seul élément à positionner dans le contexte ; il apparaissait en haut, car les éléments positionnés l'emportent sur les éléments non positionnés. Qu'en est‑il lorsqu'il y en a plus d'un ?

Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :

css

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}

À ce stade, vous voyez le premier paragraphe coloré en vert, déplacé hors du cours normal des documents et positionné un peu au-dessus de l'endroit où il se trouve à l'origine. Il est également empilé sous le paragraphe .positionne original, là où les deux se chevauchent. C'est parce que le paragraphe .positionne est le deuxième paragraphe dans l'ordre du code source HTML ; les éléments positionnés en dernier dans l'ordre du code source l'emportent sur les éléments positionnés plus en amont dans l'ordre du code source.

Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété z-index. « z-index » est une référence à l'axe z. Vous vous souvenez peut-être de points précédents du cours où nous avions discuté des pages Web en utilisant des coordonnées horizontales (axe x pour les abscisses) et verticales (axe y pour les ordonnées) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas).

Les pages web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage. Les valeurs de z-index affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, la propriété z-index des éléments positionnés vaut auto, qui est effectivement 0.

Pour modifier l'ordre d'empilement, ajoutez la déclaration z-index: 1 suivante à la règle p:nth-of-type(1) :

css

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
  z-index: 1;
}

Voici maintenant l'exemple terminé où vous devez voir le paragraphe vert par-dessus :

<h1>z-index</h1>

<p>
  Je suis un élément de niveau bloc basique. Mes éléments de niveau bloc
  adjacents se trouvent sur de nouvelles lignes en dessous de moi.
</p>

<p class="positionne">
  Maintenant je suis positionné de façon absolue par rapport à l'élément
  <code>&lt;body&gt;</code> et non à l'élément <code>&lt;html&gt;</code>&nbsp;!
</p>

<p>
  Nous sommes séparés par nos marges. En raison de la fusion des marges, nous
  sommes séparés par la largeur d'une seule de nos marges, et non des deux.
</p>

<p>
  les éléments en incise <span>comme celui-ci</span> et <span>celui-là</span> se
  trouvent sur la même ligne les uns que les autres, ainsi que les nœuds de
  texte adjacents, s'il y a de l'espace sur la même ligne. Les éléments en
  incise qui débordent
  <span>
    passent à une nouvelle ligne si possible — comme celui-ci contenant du texte </span
  >, ou vont simplement sur une nouvelle ligne sinon, un peu comme le fait cette
  image&nbsp;:
  <img
    src="https://mdn.github.io/shared-assets/images/examples/long.jpg"
    alt="un extrait large mais court d'une photo montrant plusieurs tissus" />
</p>

Notez que z-index n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 a le même effet que 300 et 40000.

Positionnement fixe

Voyons maintenant le positionnement fixe. Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à son parent positionné le plus proche, le positionnement fixe fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants.

Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprimez la règle de p:nth-of-type(1) et .positionne de la CSS.

Maintenant, mettez à jour la règle body. Supprimez la déclaration position: relative; et ajoutez une hauteur fixe, ainsi :

css

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

Maintenant, nous allons donner à l'élément HTML <h1> une déclaration position: fixed; et le positionner en haut de la fenêtre. Ajoutez la règle suivante à votre CSS :

css

h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin-top: 0;
  background: white;
  padding: 10px;
}

top: 0; est requis pour que l'élément soit collé au haut de l'écran. Ensuite, nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui.

Si vous sauvegardez et rechargez, vous voyez un petit effet amusant où l'en-tête reste fixe — le contenu semble défiler vers le haut et disparaître en dessous. Mais remarquez comment une partie du contenu est initialement masquée sous l'en-tête. Cela s'explique par le fait que l'en-tête positionnée n'apparaît plus dans le flux du document, ce qui fait que le reste du contenu remonte vers le haut.

Nous pouvons améliorer cela en décalant légèrement tous les paragraphes vers le bas. Définissez une marge supérieure pour le premier paragraphe, comme ceci :

css

p:nth-of-type(1) {
  margin-top: 60px;
}

Vous devez maintenant voir l'exemple suivant être rendu :

<h1>Positionnement absolu</h1>

<p>
  Je suis un élément de niveau bloc basique. Mes éléments de niveau bloc
  adjacents se trouvent sur de nouvelles lignes en dessous de moi.
</p>

<p class="positionne">Je ne suis plus positionné.</p>

<p>
  Nous sommes séparés par nos marges. En raison de la fusion des marges, nous
  sommes séparés par la largeur d'une seule de nos marges, et non des deux.
</p>

<p>
  les éléments en incise <span>comme celui-ci</span> et <span>celui-là</span> se
  trouvent sur la même ligne les uns que les autres, ainsi que les nœuds de
  texte adjacents, s'il y a de l'espace sur la même ligne. Les éléments en
  incise qui débordent
  <span>
    passent à une nouvelle ligne si possible — comme celui-ci contenant du texte </span
  >, ou vont simplement sur une nouvelle ligne sinon, un peu comme le fait cette
  image&nbsp;:
  <img
    src="https://mdn.github.io/shared-assets/images/examples/long.jpg"
    alt="un extrait large mais court d'une photo montrant plusieurs tissus" />
</p>

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

h1 {
  position: fixed;
  top: 0px;
  width: 500px;
  margin-top: 0;
  background: white;
  padding: 10px;
}

p:nth-of-type(1) {
  margin-top: 60px;
}

Positionnement adhérent

Il existe une autre valeur de position appelée position: sticky, qui est un peu plus récente que les autres. Il s'agit en fait d'un hybride entre la position relative et la position fixe. Elle permet à un élément positionné de se comporter comme s'il était positionné de manière relative jusqu'à ce qu'il atteigne un certain seuil de défilement (par exemple, à 10px du haut de la fenêtre d'affichage), après quoi il devient fixe.

Exemple simple

Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page.

<h1>Positionnement adhérent</h1>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<div class="positioned">adhérent : relatif en deçà, fixe au delà</div>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>

body {
  width: 500px;
  margin: 0 auto;
}

.positionne {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}

css

.positionne {
  position: sticky;
  top: 30px;
  left: 30px;
}

Index déroulant

Une utilisation courante et pleine d'intérêt de position: sticky consiste à créer une page d'index déroulante dans laquelle les divers en‑têtes restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci :

html

<h1>Index déroulant adhérent</h1>

<dl>
  <dt>A</dt>
  <dd>Abeille</dd>
  <dd>Abricot</dd>
  <dd>Altimètre</dd>
  <dd>Avion</dd>
  <dt>B</dt>
  <dd>Banane</dd>
  <dd>Betterave</dd>
  <dd>Bœuf</dd>
  <dd>Bouvreuil</dd>
  <dd>Buzzard</dd>
  <dt>C</dt>
  <dd>Calculateur</dd>
  <dd>Camera</dd>
  <dd>Cane</dd>
  <dd>Chameau</dd>
  <dt>D</dt>
  <dd>Dime</dd>
  <dd>Dindon</dd>
  <dd>Drapeau</dd>
  <dd>Drone</dd>
  <dt>E</dt>
  <dd>Eau</dd>
  <dd>Éléphant</dd>
  <dd>Escadrille</dd>
</dl>

Le CSS peut ressembler à ce qui suit. Dans le flux normal, les éléments <dt> défilent avec le contenu. Quand on ajoute position: sticky à l'élément <dt> avec une valeur top de 0, les titres se collent au sommet de la zone d'affichage au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplace l'en-tête précédent au fur et à mesure que le contenu défile.

css

dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}

body {
  width: 500px;
  height: 880px;
  margin: 0 auto;
}

Les éléments ainsi positionnés « adhèrent » au plus proche ancêtre qui dispose d'un mécanisme de défilement, ce qui est déterminé d'après la propriété overflow de ses ancêtres.

Résumé

On espère que vous vous êtes amusé⋅e à jouer avec le positionnement de base. Bien que ce ne soit pas une méthode à utiliser pour des mises en page complètes, elle est toutefois adaptée à de nombreuses tâches.

Voir aussi

Référence de la propriété position.
Exemples pratiques de positionnement, pour quelques idées utiles supplémentaires.

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 28 août 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu