Docs CSS exécutables : Position CSS

Q: Comment positionner un élément en absolu par rapport à son parent ?

Donnez au parent position: relative; et à l'enfant position: absolute; avec des décalages comme top: 0; right: 0;. Sans parent positionné, l'enfant est placé par rapport à la page.

Q: Quelle est la différence entre position relative et absolute ?

relative garde l'élément dans le flux et ne décale que l'endroit où il est dessiné, en laissant sa place d'origine vide. absolute le retire du flux et le place par rapport à son ancêtre positionné.

Q: Pourquoi position: sticky ne fonctionne-t-il pas ?

Le plus souvent pour l'une de ces trois raisons : aucun top (ou autre décalage) n'est défini, un ancêtre a overflow: hidden ou auto et devient le conteneur de défilement, ou le parent de l'élément sticky n'est pas plus haut que l'élément, qui n'a donc pas de place pour coller.

Q: Quelle est la différence entre fixed et sticky ?

fixed est retiré du flux et épinglé au viewport (sauf si un ancêtre a un transform ou un filter). sticky reste dans le flux et défile normalement jusqu'à atteindre son décalage, puis colle tant que son parent est encore à l'écran.

position: absolute en un exemple

Un élément positionné en absolu est sorti du flux normal et placé avec top, right, bottom et left. Ces décalages se mesurent depuis l'ancêtre le plus proche dont la position n'est pas static, c'est pourquoi le parent reçoit position: relative :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute inside relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card {
      position: relative;          /* the reference box */
      width: 260px; padding: 20px;
      background: #f3f4f6; border: 2px solid #111827;
    }
    .badge {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 2px 8px;
      background: #dc2626; color: white; font-size: 12px; border-radius: 999px;
    }
  </style>
</head>
<body>
  <div class="card" id="card">
    <span class="badge" id="badge">New</span>
    <h3>Card title</h3>
    <p>The badge sits 8px from the top and right edges of the card.</p>
  </div>
</body>
</html>

Supprimez position: relative de .card et le badge saute en haut à droite de toute la page, car il n'a plus d'ancêtre positionné. Cette seule ligne explique la plupart des questions du type « position absolute ne fonctionne pas ».

Ce qu'il faut savoir sur les éléments en absolu :

Ils ne prennent pas de place. Le titre et le paragraphe sont disposés comme si le badge n'existait pas.
Leur largeur se réduit à celle de leur contenu, sauf si vous définissez width ou à la fois left et right.
Les décalages se mesurent jusqu'au bord du padding du bloc conteneur, à l'intérieur de sa bordure.

Les cinq valeurs de position

Valeur	Dans le flux ?	Décalages mesurés depuis	Usage typique
`static` (par défaut)	Oui	Les décalages sont ignorés	Éléments normaux
`relative`	Oui, sa place est conservée	Sa propre position normale	Référence pour des enfants en absolu, petits ajustements
`absolute`	Non	L'ancêtre positionné le plus proche (ou la page)	Badges, infobulles, surcouches, boutons de fermeture
`fixed`	Non	Le viewport	En-têtes, boutons de chat, bandeaux cookies
`sticky`	Oui	Son conteneur de défilement, une fois le décalage atteint	En-têtes de tableau, titres de section, barres latérales

position: relative

Un élément positionné en relatif reste à sa place dans le flux. Les décalages déplacent l'endroit où il est dessiné, mais sa place d'origine reste réservée, donc rien ne bouge autour de lui :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Relative</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; }
    .row div { width: 80px; padding: 16px 0; text-align: center; background: #bfdbfe; border: 2px solid #2563eb; }
    .row .moved {
      position: relative;
      top: 20px;
      left: 20px;
      background: #fde68a; border-color: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="row">
    <div>1</div>
    <div class="moved" id="moved">2</div>
    <div id="three">3</div>
  </div>
</body>
</html>

La boîte 2 est dessinée 20px plus bas et 20px plus à droite, par-dessus la boîte 3, mais la boîte 3 n'a pas bougé : elle laisse toujours la place de la boîte 2 à son emplacement d'origine. Seul, relative sert rarement à déplacer quelque chose ; son rôle principal est d'être la boîte de référence des enfants en absolu.

Décalages et inset

top, right, bottom et left acceptent des longueurs, des pourcentages (du bloc conteneur) et auto. Le raccourci inset définit les quatre dans le même ordre que margin :

.overlay {
  position: absolute;
  inset: 0;              /* top: 0; right: 0; bottom: 0; left: 0; */
}
.corner {
  position: absolute;
  inset: auto 16px 16px auto;  /* bottom right corner, 16px in */
}

Définir deux côtés opposés étire l'élément : left: 0; right: 0 le rend aussi large que le bloc conteneur. inset: 0 sur un enfant en absolu est la façon standard de couvrir une carte avec une surcouche.

Centrer avec absolute et transform

top: 50%; left: 50% place le coin supérieur gauche de l'élément au centre. translate(-50%, -50%) le recule ensuite de la moitié de sa propre taille :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    .stage { position: relative; height: 180px; background: #e5e7eb; }
    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: #2563eb; color: white; font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <div class="stage" id="stage"><div class="center" id="c">Centered</div></div>
</body>
</html>

Flexbox et grid centrent plus simplement quand l'élément peut rester dans le flux ; la page pour centrer une div compare toutes les méthodes.

position: fixed

Un élément fixed est placé par rapport au viewport et y reste pendant le défilement de la page :

.chat-button {
  position: fixed;
  bottom: 16px;
  right: 16px;
}

Deux pièges. Un élément fixed ne prend pas de place, donc un en-tête fixed recouvre le haut de la page si vous n'ajoutez pas de padding-top au body. Et si un ancêtre a un transform, un filter ou une perspective, c'est cet ancêtre qui devient la boîte de référence à la place du viewport, et l'élément défile avec lui.

position: sticky

Un élément sticky défile normalement jusqu'à atteindre son décalage, puis y reste collé jusqu'à ce que la fin de son parent passe. Faites défiler la boîte ci-dessous :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .scroller { height: 220px; overflow-y: auto; border: 2px solid #111827; }
    h3 {
      position: sticky;
      top: 0;
      margin: 0; padding: 8px 12px;
      background: #2563eb; color: white;
    }
    p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  </style>
</head>
<body>
  <div class="scroller" id="scroller">
    <section>
      <h3>A</h3>
      <p>Adams</p><p>Allen</p><p>Alvarez</p><p>Anderson</p><p>Arnold</p>
    </section>
    <section>
      <h3>B</h3>
      <p>Baker</p><p>Bell</p><p>Brooks</p><p>Brown</p><p>Bryant</p>
    </section>
    <section>
      <h3>C</h3>
      <p>Campbell</p><p>Carter</p><p>Clark</p><p>Collins</p><p>Cooper</p>
    </section>
  </div>
</body>
</html>

Chaque lettre colle en haut de la boîte de défilement tant que sa section est visible, puis est poussée par la suivante, car un élément sticky ne quitte jamais son parent.

Quand sticky ne colle pas, vérifiez ceci :

Pas de décalage. position: sticky ne fait rien sans top, bottom, left ou right.
Un ancêtre avec overflow: hidden, auto ou scroll. Il devient le conteneur de défilement, et s'il ne défile pas réellement, rien ne colle. Utilisez overflow: clip si vous voulez seulement masquer le débordement.
Un parent qui n'est pas plus haut que l'élément sticky. Il n'y a pas de place pour coller à l'intérieur.
Un parent flex ou grid qui l'étire. Dans une ligne flex, ajoutez align-self: flex-start à la barre latérale sticky.

Erreurs courantes

Oublier position: relative sur le parent d'un élément en absolu.
Utiliser absolute pour la mise en page d'une page. Les éléments en absolu s'ignorent entre eux et ignorent le contenu, et le texte se chevauche sur les petits écrans. Utilisez flexbox ou grid pour la mise en page et absolute pour les petites décorations.
Des décalages sur un élément static. top: 10px ne fait rien sans position.
Se battre pour savoir quel élément passe devant. Les éléments positionnés qui se chevauchent sont ordonnés par z-index.
Un en-tête fixed qui masque le contenu. Ajoutez du padding à la page, ou scroll-padding-top pour que les liens d'ancre arrivent en dessous.

Questions fréquentes

Que fait position: absolute ?

Il sort l'élément du flux normal (les autres éléments se comportent comme s'il n'existait pas) et le place avec top, right, bottom et left, mesurés depuis son bloc conteneur : l'ancêtre le plus proche dont la position n'est pas static.

Comment positionner un élément en absolu par rapport à son parent ?

Donnez au parent position: relative; et à l'enfant position: absolute; avec des décalages comme top: 0; right: 0;. Sans parent positionné, l'enfant est placé par rapport à la page.

Quelle est la différence entre position relative et absolute ?

relative garde l'élément dans le flux et ne décale que l'endroit où il est dessiné, en laissant sa place d'origine vide. absolute le retire du flux et le place par rapport à son ancêtre positionné.

Pourquoi position: sticky ne fonctionne-t-il pas ?

Le plus souvent pour l'une de ces trois raisons : aucun top (ou autre décalage) n'est défini, un ancêtre a overflow: hidden ou auto et devient le conteneur de défilement, ou le parent de l'élément sticky n'est pas plus haut que l'élément, qui n'a donc pas de place pour coller.

Quelle est la différence entre fixed et sticky ?

fixed est retiré du flux et épinglé au viewport (sauf si un ancêtre a un transform ou un filter). sticky reste dans le flux et défile normalement jusqu'à atteindre son décalage, puis colle tant que son parent est encore à l'écran.

Concepts liés