¿Qué tiene mayor prioridad: la opacidad o el índice Z en los navegadores?

Estoy codificando una “ventana emergente” en JavaScript y me he encontrado con algo interesante:

Captura de pantalla recortada que muestra un extraño comportamiento de apilamiento

El recuadro azul debajo de la ventana emergente es visible, aunque espero que esté oculto. La ventana emergente se agregó después del cuadrado, por lo que debería estar en la parte superior.

La propiedad de opacity CSS del cuadrado azul marino es 0.3 . Por lo que he probado, parece que cada número del intervalo (0,1) arrojaría el mismo resultado. Si lo cambio a 1 , entonces se comporta como se esperaba (es decir, la parte del cuadrado debajo de la ventana emergente está oculta).

Intenté establecer la propiedad z-index en 10 para el cuadrado y 100 para el elemento emergente, pero no cambia nada.

¿Qué me estoy perdiendo? ¿Por qué se muestra una parte del cuadrado?

Navegadores probados:

  • Firefox 3.6.x
  • Chrome 4

Esto no es un error y en realidad se supone que funciona . Es un poco confuso ya que la descripción elaborada de Stacking Contexts no menciona nada al respecto. Sin embargo, el módulo de formato visual se vincula al módulo de color donde se encuentra este gotcha particular (énfasis mío):

Dado que un elemento con una opacidad inferior a 1 se compone a partir de una única imagen fuera de pantalla, el contenido que se encuentra fuera de este no se puede superponer en orden z entre las partes del contenido que se encuentran dentro de él. Por la misma razón, las implementaciones deben crear un nuevo contexto de astackmiento para cualquier elemento con una opacidad inferior a 1. Si un elemento con una opacidad inferior a 1 no está ubicado, las implementaciones deben pintar la capa que crea, dentro del contexto de astackmiento padre, al mismo orden de astackmiento que se usaría si fuera un elemento posicionado con ‘z-index: 0’ y ‘opacity: 1’. Si se coloca un elemento con una opacidad inferior a 1, la propiedad ‘z-index’ se aplica como se describe en [CSS21], excepto que ‘auto’ se trata como ‘0’ ya que siempre se crea un nuevo contexto de astackmiento. Consulte la sección 9.9 y el Apéndice E de [CSS21] para obtener más información sobre los contextos de astackmiento. Las reglas de este párrafo no se aplican a los elementos SVG, ya que SVG tiene su propio modelo de representación ([SVG11], Capítulo 3).

No es un problema que la opacity sea ​​más importante que el z-index , en lugar de que el z-index sea ​​relativo a su contexto de astackmiento (consulte z-index en la especificación CSS2).

En otras palabras, z-index solo es significativo dentro del contexto de un ancestro posicionado (ya sea relativo, absoluto o fijo). Lo que debe hacer para solucionar su problema es agregar una position: relative; al elemento que contiene tanto su ventana emergente como su casilla azul marino, y probablemente lo agregue un z-index: 1; . Al ver su captura de pantalla, probablemente será un elemento superior, como un div envoltorio.

Solución para dos elementos, como los divs: agregue una opacidad de 0.99 a su elemento superior, y el orden de ambos se restablece.

 opacity: 0.99; 

Puede ser necesario un código de ejemplo para solucionar este problema.

Puede colocar overflow: hidden y posiblemente position: relative en un DIV que rodea a todos los objetos del editor para intentar obligar a los elementos a dibujarse dentro de ese DIV , por ejemplo:

 
(Editor object buttons go here)

Como último recurso, también puedes probar un iframe entre los dos elementos para tratar de evitar que se filtren.

Puede intentar establecer el DIV de la ventana emergente de esta manera utilizando !important para que el estilo no cambie al aplicar un nuevo estilo o clase:

 background-color: white !important; z-index: 100 !important; opacity: 1.0 !important; 

Luego, crea una nueva clase de CSS:

 .PopupElement { z-index: inherited; opacity: inherited; } 

Y agregue clase a todos los elementos en la ventana, así por ejemplo:

  

Supongo que esto funcionaría, ya que no hay prioridad en la aplicación de atributos de CSS … por lo que sé. =)

Tuve el mismo problema. Utilizar rgba en lugar de color / opacidad resolvió mi problema. Trabajando con LESS (en el marco de Bootstrap), la función fade () hizo la conversión por mí.