Quelles propriétés CSS créent un contexte d'empilement ?

Question

Je suis en train d'étudier contextes d'empilement et faire quelques tests avec les propriétés qui créent un contexte d'empilement.

J'ai fait plusieurs tests et j'ai découvert que, en plus de z-index Bien entendu, les propriétés suivantes créent également un contexte d'empilement :

• transform autre que none ;
• opacity autre que 1 ;
• Et perspective .

Existe-t-il d'autres propriétés qui appliquent un contexte d'empilement ?

Answer 1

Un ou plusieurs des scénarios suivants amèneront un élément à établir son propre contexte d'empilement 1 pour ses descendants :

• L'élément Root contient toujours un contexte d'empilement Root. C'est pourquoi vous pouvez commencer à disposer les éléments sans avoir à positionner d'abord l'élément Root. Tout élément qui ne participe pas déjà à un contexte d'empilement local (généré par l'un des autres scénarios ci-dessous) participera au contexte d'empilement de la racine à la place.

• Réglage de z-index à tout autre chose que auto sur un élément qui est positionné (c'est-à-dire un élément avec position qui n'est pas static ).

  • Notez que ce comportement est appelé à être modifié pour les éléments avec position: fixed de telle sorte qu'ils établiront toujours des contextes d'empilement, indépendamment de leur z-index valeur. Certains navigateurs ont commencé à adopter ce comportement, mais ce changement n'a pas été pris en compte dans la version CSS2.1 ni dans la nouvelle version de la norme Module de mise en page positionnée CSS pour le moment, il n'est donc pas judicieux de se fier à ce comportement pour l'instant.

    Ce changement de comportement est exploré dans une autre de mes réponses qui, à son tour, renvoie à cet article y cet ensemble de procès-verbaux de la téléconférence du CSSWG .

  • Une autre exception à cette règle est le cas d'un élément flexible y un élément de la grille . Réglage de z-index lui fera toujours établir un contexte d'empilement, même s'il n'est pas positionné.

• Réglage de opacity à tout ce qui est inférieur à 1 .

• Transformer l'élément :

  • Réglage de transform à tout autre chose que none .

  • Réglage de transform-style a preserve-3d .

  • Réglage de perspective à tout autre chose que none .

• Créer un Région CSS : réglage flow-from à tout autre chose que none sur un élément dont content est tout autre chose que normal .

• Sur médias paginés chaque case page-margin établit son propre contexte d'empilement.

• Sur effets de filtre , réglage filter à tout autre chose que none .

• Sur composition et mélange , réglage isolation a isolate et la mise en place mix-blend-mode à une valeur différente de normal

• Sur changera , réglage will-change à une propriété dont toute valeur non initiale créerait un contexte d'empilement.

• Sur masquage , réglage clip-path / mask avec une valeur autre que none .

Notez qu'un contexte de mise en forme des blocs n'est pas la même chose qu'un contexte d'empilement ; en fait, il s'agit de deux concepts complètement indépendants (mais qui ne s'excluent pas mutuellement).

---

1 _{Cela ne comprend pas <em>contextes de pseudo-empilage </em>un terme informel qui fait simplement référence à <a href="http://www.w3.org/TR/CSS21/zindex.html" rel="nofollow noreferrer">des choses qui se comportent comme des contextes d'empilage indépendants </a>en ce qui concerne le positionnement, mais participent en fait à leurs contextes d'empilement parentaux.}