¿Qué propiedades de CSS crean un contexto de astackmiento?

Estoy estudiando sobre el astackmiento de contextos y haciendo algunas pruebas con las propiedades que crean un contexto de astackmiento.

Hice varias pruebas y descubrí que, además de z-index , por supuesto, las siguientes propiedades también crean un contexto de astackmiento:

  • transform otro que none ;
  • opacity distinta de 1 ;
  • Y perspective .

¿Hay otras propiedades que apliquen un contexto de astackmiento?

Uno o más de los siguientes escenarios harán que un elemento establezca su propio contexto de astackmiento 1 para sus descendientes:

  • El elemento raíz siempre tiene un contexto de astackmiento de raíz. Esta es la razón por la que puede comenzar a organizar elementos sin tener que posicionar primero el elemento raíz. Cualquier elemento que no participe en un contexto de astackmiento local (generado por cualquiera de los otros escenarios a continuación) participará en el contexto de astackmiento de raíz.

  • Establecer z-index en cualquier elemento que no sea auto en un elemento que está posicionado (es decir, un elemento con una position que no es static ).

    • Tenga en cuenta que este comportamiento está progtwigdo para cambiarse para los elementos con position: fixed modo que siempre establecerán contextos de astackmiento independientemente de su valor de z-index . Algunos navegadores han comenzado a adoptar este comportamiento, sin embargo, el cambio no se ha reflejado ya sea en CSS2.1 o en el nuevo Módulo de diseño posicionado de CSS , por lo que puede que no sea prudente confiar en este comportamiento por el momento.

      Este cambio de comportamiento se explora en otra respuesta mía , que a su vez se relaciona con este artículo y este conjunto de minutos de teleconferencia de CSSWG .

    • Otra excepción a esto es con un elemento flexible . Establecer z-index en un elemento flexible siempre hará que establezca un contexto de astackmiento, incluso si no está posicionado.

  • Ajuste la opacity a cualquier cosa menor que 1 .

  • Transformando el elemento:

    • Configuración transform a cualquier cosa que none sea none .

    • Establecer transform-style para preserve-3d .

    • Establecer la perspective en cualquier cosa que none sea none .

  • Crear una región de CSS : establecer flow-from en cualquier elemento que none sea none en un elemento cuyo content sea ​​distinto de lo normal .

  • En los medios paginados , cada cuadro de margen de página establece su propio contexto de astackmiento.

  • En efectos de filtro , ajuste el filter a cualquier cosa que none sea none .

  • En la composición y combinación , establezca el isolation para isolate .

  • En cambiará , la configuración will-change a una propiedad cuyo valor no inicial crearía un contexto de astackmiento.

Tenga en cuenta que un contexto de formato de bloque no es lo mismo que un contexto de astackmiento; de hecho, son dos conceptos completamente independientes (aunque no mutuamente excluyentes).


1 Esto no incluye contextos de pseudoastackmiento , un término informal que simplemente se refiere a cosas que se comportan como contextos de astackmiento independientes con respecto al posicionamiento, pero que realmente participan en sus contextos de astackmiento padres.