Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Débordement : overflow, défilement et découpage | SovranCode

Contenu du coursCSS — Débordement · 26 leçons

Les bases de CSS

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités CSS — Couleurs CSS — Fonctions CSS — Variables

Boîtes et mise en page

CSS — Modèle de boîte CSS — Display CSS — Positionnement CSS — Z-index et empilement CSS — Flexbox CSS — Grid

Couleurs et typographie

CSS — Arrière-plans CSS — Bordures et ombres CSS — Typographie

Un CSS adaptable et durable

CSS — Media queries CSS — Container queries CSS — Architecture CSS — Accessibilité

États et mouvements

CSS — Pseudo-classes CSS — Pseudo-éléments CSS — Transformations CSS — Transitions CSS — Animations CSS — Débordements

CSS62 min

CSS — Débordement

Identifiez le contenu qui dépasse avant de le masquer avec overflow. Pour un tableau réellement large, prévoyez une zone de défilement nommée qui reste utilisable au clavier sans faire défiler toute la page horizontalement.

overflow définit ce qui arrive au contenu qui dépasse d’une boîte. Les contextes d’empilement organisent, eux, l’ordre d’affichage des groupes. Découpage, défilement et empilement peuvent interagir avec sticky, le focus, les menus et les boîtes de dialogue. Repérez d’abord la boîte responsable avant d’ajouter overflow: hidden ou d’augmenter z-index.

Distinguer défilement et empilement

Repérez la zone de défilement horizontal, puis le contexte local de la carte et le badge positionné. Cherchez quel élément doit défiler et quel élément doit simplement passer devant son voisin.

.table-region { overflow-x: auto; } .card { position: relative; isolation: isolate; } .badge { position: absolute; z-index: 1; }

Les bons réflexes

Trouvez l’élément qui déborde avant de masquer le dépassement.
Vérifiez qu’aucun découpage involontaire ne coupe le focus ou les éléments superposés.
Raisonnez sur les contextes d’empilement comme sur des groupes.

L’erreur à éviter

Augmenter z-index jusqu’à 999999 ne permet pas à un descendant de sortir du contexte d’empilement de son ancêtre. Ce nombre ne supprime pas non plus une règle de découpage qui s’applique à sa boîte.

ATELIER CSS · ENVIRON 34 MIN

Diagnostiquer le découpage et z-index étape par étape

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Le débordement se règle par axe et change le comportement

Sur chaque axe, le contenu peut rester visible, être découpé ou devenir défilable selon la valeur choisie. Un tableau réellement plus large que sa colonne de lecture peut être placé dans une région nommée avec overflow-x: auto ; toute la page ne doit pas devenir une zone de défilement par accident. overflow: hidden découpe le contenu et crée un conteneur de défilement, même sans commande de défilement directement proposée à la personne. overflow: clip découpe sans créer de mécanisme de défilement. Ces valeurs ne corrigent pas à elles seules la largeur fixe inadaptée d’un enfant. Repérez le descendant qui dépasse et ses tailles minimales intrinsèques, puis choisissez entre retour à la ligne, rétrécissement et défilement.

Les contextes d’empilement organisent des groupes

Un élément positionné avec un z-index différent de auto peut créer un contexte d’empilement, tout comme une opacité inférieure à 1, une transformation, isolation et certaines valeurs de contain. Les descendants s’empilent dans ce contexte ; un grand z-index ne les fait pas passer devant un contexte voisin placé au-dessus de leur groupe. Repérez l’arbre des contextes avant d’augmenter les nombres. La couche supérieure du navigateur, utilisée notamment par dialog ouvert en mode modal, suit d’autres règles. Préférez ce comportement natif pour une modale plutôt que de chercher à dépasser tous les en-têtes par un nombre plus grand.

Le découpage et le positionnement sont deux contraintes distinctes

Un enfant peut être au bon niveau d’empilement tout en restant invisible parce qu’un ancêtre découpe son affichage. sticky dépend aussi du conteneur de défilement concerné : ajouter overflow à un ancêtre peut changer le repère de défilement et donner l’impression que le titre ne fonctionne plus. Un outline de focus peut être coupé ; arrondir un composant par un découpage trop large peut ainsi gêner la navigation. Isolez les couches décoratives locales quand cela aide, et choisissez l’emplacement des menus et des dialogues selon le composant auquel ils appartiennent et leur interaction. Testez le zoom, les textes longs, le focus clavier et le défilement réel.

Faites défiler uniquement la zone de comparaison, puis passez son overflow à hidden et atteignez-la au clavier. Ajoutez une transformation à la carte et examinez son contexte d’empilement dans les outils de développement.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
* { box-sizing:border-box; }
body { margin:0; padding:1rem; font:1rem/1.6 system-ui; }
.table-region { max-width:100%; overflow-x:auto; border:2px solid #597087; }
table { min-width:44rem; border-collapse:collapse; }
th,td { padding:.75rem; border:1px solid #aebbc7; text-align:left; }
.card { position:relative; isolation:isolate; margin-top:2rem; padding:2rem 1rem 1rem; border:2px solid #174986; }
.badge { position:absolute; inset-block-start:.5rem; inset-inline-end:.5rem; z-index:1; background:#174986; color:white; padding:.25rem .6rem; }
:focus-visible { outline:3px solid #b45f00; outline-offset:3px; }
</style>
</head>
<body>
<main><h1>Comparer les cours</h1><section class="table-region" tabindex="0" aria-label="Comparaison des cours à défilement horizontal"><table><tr><th>Cours</th><th>Leçons</th><th>Ateliers</th><th>Évaluation</th><th>Projet</th></tr><tr><td>CSS</td><td>Parcours complet</td><td>Guidés</td><td>Récapitulative</td><td>Page adaptable</td></tr></table></section><article class="card"><span class="badge">Mis à jour</span><h2>Des couches organisées dans le composant</h2><p>Le badge s’empile dans le contexte de cette carte.</p></article></main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
* { box-sizing:border-box; }
body { margin:0; padding:1rem; font:1rem/1.6 system-ui; }
.table-region { max-width:100%; overflow-x:auto; border:2px solid #597087; }
table { min-width:44rem; border-collapse:collapse; }
th,td { padding:.75rem; border:1px solid #aebbc7; text-align:left; }
.card { position:relative; isolation:isolate; margin-top:2rem; padding:2rem 1rem 1rem; border:2px solid #174986; }
.badge { position:absolute; inset-block-start:.5rem; inset-inline-end:.5rem; z-index:1; background:#174986; color:white; padding:.25rem .6rem; }
:focus-visible { outline:3px solid #b45f00; outline-offset:3px; }
</style>
</head>
<body>
<main><h1>Comparer les cours</h1><section class="table-region" tabindex="0" aria-label="Comparaison des cours à défilement horizontal"><table><tr><th>Cours</th><th>Leçons</th><th>Ateliers</th><th>Évaluation</th><th>Projet</th></tr><tr><td>CSS</td><td>Parcours complet</td><td>Guidés</td><td>Récapitulative</td><td>Page adaptable</td></tr></table></section><article class="card"><span class="badge">Mis à jour</span><h2>Des couches organisées dans le composant</h2><p>Le badge s’empile dans le contexte de cette carte.</p></article></main>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

.menu { position:absolute; z-index:999999; }
.card { overflow:hidden; transform:translateZ(0); }

Voir la correction et son explication

.card { position:relative; isolation:isolate; }
.menu { position:absolute; z-index:1; }

Le grand z-index ne supprime ni le découpage applicable ni les limites du contexte d’empilement de l’ancêtre. Retirez le découpage involontaire et la transformation ajoutée sans besoin, puis définissez un ordre local simple pour les couches du composant.

À VOUS DE JOUER

Créer sans recopier l’exemple

Créez un tableau comparatif qui défile dans sa propre région nommée, puis une carte avec un badge empilé localement. Ajoutez du contenu long et vérifiez le focus clavier.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Diagnostiquer le découpage et z-index étape par étape — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Diagnostiquer le découpage et z-index étape par étape</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Diagnostiquer le découpage et z-index étape par étape — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Diagnostiquer le découpage et z-index étape par étape</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

La page elle-même ne déborde pas horizontalement dans une fenêtre de 320px de large.Le contenu défilable possède un indicateur de focus visible et reste utilisable au clavier.L’ordre des couches repose sur un contexte local documenté, plutôt que sur une augmentation arbitraire des z-index à l’échelle de la page.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Un z-index très élevé permet-il à un enfant de sortir du contexte d’empilement de son ancêtre ?NonOui, au-delà de 9999Uniquement avec position: fixed

2. Que faire avant d’ajouter overflow: hidden pour supprimer le défilement de la page ?Identifier le contenu qui dépasse et le comportement attenduAugmenter z-indexMettre tous les enfants en position:absolute

Chargement du travail enregistré…

Vos choix de confidentialité

Les bases de CSS

Boîtes et mise en page

Couleurs et typographie

Un CSS adaptable et durable

États et mouvements

CSS — Débordement

Distinguer défilement et empilement

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Diagnostiquer le découpage et z-index étape par étape

Le débordement se règle par axe et change le comportement

Les contextes d’empilement organisent des groupes

Le découpage et le positionnement sont deux contraintes distinctes

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris