CSS Academy · Leçon

Positionnement absolu et bloc conteneur

Positionnez les éléments absolument par rapport à leur ancêtre positionné le plus proche.

Positionnement absolu et bloc conteneur est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

position: absolute

Un élément positionné en absolu est retiré du flux normal du document. Les autres éléments se comportent comme s’il n’existait pas. Il est positionné par rapport à son ancêtre positionné le plus proche.

Le bloc englobant

Le bloc englobant d’un élément positionné en absolu est son ancêtre le plus proche dont la valeur de position est différente de static. S’il n’en existe aucun, l’élément est positionné par rapport au bloc englobant initial (la fenêtre d’affichage).

Configurer un bloc englobant

Le schéma le plus courant consiste à ajouter position: relative à un parent pour contenir les enfants positionnés en absolu.

<div class="card">Card content<span class="badge">Badge</span></div>

Propriétés de décalage avec absolute

Avec le positionnement absolu, top/right/bottom/left sont mesurés à partir du bord interne du bloc englobant.

<div class="tooltip-wrap">Hover target<span class="tooltip">I'm below the parent</span></div>

Centrage avec absolute

La technique classique pour centrer des éléments positionnés en absolu :

<div class="center-wrap"><div class="centered">Perfectly centered</div></div>

Largeur et hauteur des éléments absolute

Par défaut, les éléments positionnés en absolu s’ajustent à leur contenu (sauf si une largeur ou une hauteur est définie). Ils ne s’étendent plus sur toute la largeur de leur conteneur comme les éléments de type bloc.

Étirement avec tous les bords

Définir les quatre bords sur 0 étire un élément positionné en absolu pour qu’il remplisse son bloc englobant :

<div class="stretch-wrap"><div class="overlay">Overlay covers all edges</div></div>

Notation abrégée inset

La propriété inset est une notation abrégée qui regroupe top, right, bottom et left :

<div class="cover-wrap"><div class="full-cover"></div></div>

Empilement avec z-index

Les éléments positionnés en absolu participent aux contextes d’empilement. Utilisez z-index pour contrôler quels éléments absolus qui se chevauchent apparaissent au premier plan.

<div class="stack-wrap"><div class="box-a">Behind</div><div class="tooltip">On top (z-index:100)</div></div>

Piège courant : oublier le parent

Si vous oubliez d’ajouter position: relative au parent, un enfant absolu sera positionné par rapport à l’ancêtre déjà positionné le plus proche — souvent la fenêtre d’affichage. Vérifiez toujours le bloc englobant.

Absolute dans Flex/Grid

Un conteneur flex ou grid n’est pas automatiquement un élément positionné. Vous devez tout de même ajouter explicitement position: relative pour en faire un bloc englobant pour les enfants absolus.

Vérification rapide

Où un élément positionné en absolu est-il placé si aucun de ses ancêtres n’a une valeur de position différente de static ?

Récapitulatif

Les éléments positionnés en absolu quittent le flux du document et sont positionnés par rapport à leur ancêtre non statique le plus proche. Ajoutez toujours position: relative au parent pour contrôler leur placement. Utilisez inset: 0 pour étirer un élément absolu afin qu’il remplisse son conteneur.

Questions Fréquemment Posées

La leçon « Positionnement absolu et bloc conteneur » est-elle gratuite ?

Oui — le texte complet de « Positionnement absolu et bloc conteneur » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Positionnement absolu et bloc conteneur » ?

Positionnez les éléments absolument par rapport à leur ancêtre positionné le plus proche. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Positionnement absolu et bloc conteneur » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à CSS Academy