Cet article explore le concept des "stacking contexts" en CSS, souvent mal compris et source de problèmes de mise en page. Il explique comment certains éléments HTML sont visuellement empilés les uns sur les autres grâce à un axe z imaginaire, créant une perception de profondeur. Les "stacking contexts" sont créés par des propriétés CSS comme position (avec z-index), opacity, transform, et contain. L'auteur souligne que les éléments sont d'abord empilés par contexte, puis par ordre de z-index au sein de chaque contexte. L'article propose des approches pratiques pour "déstacker" les éléments lorsque cela est nécessaire.
L'article explore les problèmes de superposition des éléments en CSS et les solutions modernes comme les popovers et les dialogs. Il explique comment les contextes de superposition (stacking contexts) peuvent compliquer l'utilisation de z-index et comment les éléments comme les popovers et les dialogs peuvent accéder à la "top layer" pour résoudre ces problèmes. Cependant, l'article met en lumière un conflit potentiel entre les popovers et les dialogs, notamment en matière d'accessibilité, où un utilisateur au clavier peut rencontrer des difficultés pour interagir avec un popover (comme une notification toast) lorsqu'un dialog est ouvert. L'auteur illustre ce problème avec un exemple concret et un CodePen démonstratif.
Un article très complet sur la propriété CSS z-index et sur la notion de "stacking context" qui lui est associée
Un article sur les contextes d'empilement (stacking context) en CSS