¿Qué propiedades CSS crean un contexto de apilamiento?

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

Hice varias pruebas y encontré que, además dez-indexPor supuesto, las siguientes propiedades también crean un contexto de apilamiento:

transform otro quenone;opacity otro que1;Yperspective.

¿Existen otras propiedades que apliquen un contexto de apilamiento?

 Fabrício Matté22 abr. 2013 15:19
@minitech Oh interesante.=] Lo comprobará.
 jotavejv22 abr. 2013 15:26
@minitech No estaba al tanto de la bandera de cromo de posición fija, gracias
 Ry-22 abr. 2013 15:17
position: fixed ¡Puede crear un contexto de apilamiento en Chrom (e | ium)! Hay una bandera para eso específicamente enchrome://flags.
 Ry-22 abr. 2013 15:19
@ FabrícioMatté: Sí, la bandera dice quetodos Los elementos de posición fija crean un contexto de apilamiento. No sé si es una corrección de errores.
 Fabrício Matté22 abr. 2013 15:17
@minitech Sí,z-index requiere una posición que no sea estática para crear un contexto de apilamiento. Creo que OP es consciente de eso. O significa esoposition:fixed crea un contexto de apilamiento por sí mismo sinz-index?

Respuestas a la pregunta(1)

Solución de preguntas

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

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

Ajustez-index a cualquier otra cosa que no seaauto en un elemento que está posicionado (es decir, un elemento conposition eso no esstatic).

Tenga en cuenta que este comportamiento está programado para ser cambiado por elementos conposition: fixed de modo que siempre establezcan contextos de apilamiento independientemente de suz-index valor. Algunos navegadores han comenzado a adoptar este comportamiento, sin embargo, el cambio no se ha reflejado ni en CSS2.1 ni en el nuevoMódulo de diseño posicionado CSS sin embargo, por lo tanto, puede que no sea prudente confiar en este comportamiento por ahora.

Este cambio en el comportamiento se explora enotra respuesta mia, que a su vez enlaza aEste artículo yeste conjunto de minutos de telecon de CSSWG.

Otra excepción a esto es con unaelemento flexible. Ajustez-index en un elemento flexible siempre hará que establezca un contexto de apilamiento incluso si no está posicionado.

Ajusteopacity a cualquier cosa menos que1.

Transformando el elemento:

Ajustetransform a cualquier otra cosa que no seanone.

Ajustetransform-style apreserve-3d.

Ajusteperspective a cualquier otra cosa que no seanone.

Creando unRegión CSS: ajusteflow-from a cualquier otra cosa que no seanone en un elemento cuyocontent es otra cosa quenormal.

Enmedios paginadoscada unocuadro de margen de página Establece su propio contexto de apilamiento.

Enefectos de filtro, ajustefilter a cualquier otra cosa que no seanone.

Encomposición y mezcla, ajusteisolation aisolate.

Encambiará, ajustewill-change a una propiedad cuyo valor no inicial crearía un contexto de apilamiento.

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

1 Esto no incluyecontextos de pseudoapilamiento, un término informal que simplemente se refiere aCosas que se comportan como contextos de apilamiento independientes. con respecto al posicionamiento, pero en realidad participan en sus contextos de apilamiento padre.

 BoltClock02 ene. 2014 04:43
@ and-dev: Oh, eso es un error en mi respuesta. Debe ser automático, no 1.
 BoltClock22 abr. 2013 16:10
@minitech: modifiqué la respuesta y agregué una pequeña nota a pie de página en contextos de pseudoapilamiento basado en su respuesta eliminada, aunque mi respuesta no los incluye, ya que pueden ser confusos.
 Ry-22 abr. 2013 15:33
Oh, ¿no era una bandera en Chrome 22? Supongo que por eso se movió, entonces.
 and-dev01 ene. 2014 13:15
¿La posición 'pegajosa' crea automáticamente un contexto de apilamiento?
 Fabrício Matté22 abr. 2013 15:39
@minitech También del artículo vinculado: "Para probar si su página va a cambiar, vaya a Chrome'sabout:flags y activar / desactivar "los elementos de posición fija crean contextos de apilamiento". Si tu diseño se comporta igual en ambos casos, estás configurado. Si no, asegúrate de que te parezca aceptable con ese indicador habilitado, ya que ese será el valor predeterminado en Chrome 22. "
 and-dev01 ene. 2014 15:37
Gracias por la aclaración. "Configuración del índice z para cualquier otra cosa que no sea 1" - ¿Esto significa que un elemento posicionado con índice z: 1 no crea un contexto de apilamiento?
 BoltClock22 abr. 2013 16:28
@ Fabrício Matté: No creo que haya ninguna aplicación práctica, pero vale la pena tenerlo en cuenta cuando se trata de casos de borde, ya que el comportamiento del contexto de apilamiento afecta principalmente a los descendientes posicionados.
 Artem Andreev15 abr. 2015 10:21
-webkit-overflow-scrolling: touch crea un nuevo contexto de apilamiento, así.
 BoltClock14 sept. 2014 02:03
@Hashem Qolami: Se ve bien, gracias. No es necesario que me notifique en un comentario, ya que me notificarán las modificaciones :)
 Hashem Qolami14 sept. 2014 00:54
@BoltClock AñadidoEfectos de filtro CSS a la lista
 BoltClock01 ene. 2014 13:18
@ and-dev: Sí de acuerdo con las reglas dadas, porque es un valor diferente astatic. Si debería hacerlo solo paraz-index otro queauto o para todos los valores no está claro, eso dependerá de cómo se implementará.
 Fabrício Matté22 abr. 2013 16:25
Muy a lo largo de la respuesta, +1. Pero ahora me pregunto, sobre esos contextos de pseudo-apilamiento creados implícitamente porinline-block yinline-table Elementos, ¿tienen alguna aplicación práctica o es algo que no vale la pena preocuparse?
 Fabrício Matté22 abr. 2013 15:34
@minitech Por lo que he leído, parece que se introdujo la bandera para que pueda desactivar el nuevoposition:fixed Comportamiento introducido en Chrome 22 para back-compat.

Su respuesta a la pregunta