not - ¿Qué propiedades de CSS crean un contexto de apilamiento?

z-index position absolute

Question

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

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

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

¿Hay otras propiedades que apliquen un contexto de apilamiento?

Answer 1

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

• El elemento raíz siempre tiene un contexto de apilamiento 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 apilamiento local (generado por cualquiera de los otros escenarios a continuación) participará en el contexto de apilamiento 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á programado para cambiarse para los elementos con position: fixed modo que siempre establecerán contextos de apilamiento 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 apilamiento, incluso si no está posicionado.

• Ajuste la opacity a cualquier cosa menor que 1 .

• Transforming 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 apilamiento.

• 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 apilamiento.

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

¹ _{Esto no incluye contextos de pseudoapilamiento , un término informal que simplemente se refiere a cosas que se comportan como contextos de apilamiento independientes con respecto al posicionamiento, pero que realmente participan en sus contextos de apilamiento padres.}