CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 6 · Exercice de TD

Qui crée un contexte ?

Positionnement et empilement · niveau 2

Énoncé

Pour chacun de ces éléments, dire s'il crée un contexte d'empilement :

position: relative sans z-index ;
position: absolute; z-index: 0; ;
opacity: 0.99 ;
z-index: 5 sans position ;
position: sticky; top: 0; ;
transform: rotate(2deg).

Pourquoi un bouton qui « s'estompe » avec opacity peut-il modifier l'empilement de ses enfants ?

Corrigé

Non : il faut un z-index autre que auto.
Oui : 0 n'est pas auto.
Oui : toute opacité inférieure à 1.
Non, sauf si l'élément est un élément flex ou grid : sans position, le z-index est ignoré.
Oui : toute boîte sticky (ou fixed).
Oui : tout transform autre que none.

Pendant l'animation d'opacity, le bouton crée un contexte d'empilement : ses enfants positionnés (une infobulle, par exemple) ne sont plus comparés au reste de la page mais à l'intérieur du bouton, et peuvent passer sous un voisin. À la fin de l'animation, à opacity: 1, le contexte disparaît : d'où des empilements qui « clignotent ».

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →