¿Qué tiene una prioridad más grande: opacidad o z-index en los navegadores?

Question

estoy codificación de una "ventana emergente" en JavaScript y me he encontrado con una cosa interesante:

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

CSS opacity propiedad de la plaza navy 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).

He intentado establecer la propiedad z-index en 10 para el cuadrado y 100 para la ventana 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

Answer 1

Esto no es un error y en realidad es cómo se supone que debe funcionar. Es un poco confuso ya que el elaborate description of Stacking Contexts no menciona nada al respecto. Sin embargo, los visual formatting module enlaces a la color module donde este particular Gotcha puede puede encontrar (énfasis mío):

Desde un elemento con opacidad de menos de 1 composited de una sola fuera de la pantalla de imagen, contenido fuera de ella no puede ser capas en z-orden entre pedazos de contenido dentro de ella. Por la misma razón, las implementaciones deben crear un nuevo contexto de apilamiento para cualquier elemento con opacidad inferior a 1. Si un elemento con una opacidad inferior a 1 es no colocado, las implementaciones deben pintar la capa que crea, dentro de su apilamiento primario contexto, en el mismo orden de apilamiento que se usaría si fuera un elemento posicionado con 'z-index: 0' y 'opacidad: 1'. Si se coloca un elemento con una opacidad menor 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 apilamiento . Consulte la sección 9.9 y el Apéndice E de [CSS21] para obtener más información sobre en los contextos de apilamiento. Las reglas en este párrafo no se aplican a los elementos SVG, ya que SVG tiene su propio modelo de representación ([SVG11], , Capítulo 3).

Answer 2

Se podría tratar de establecer DIV de la ventana emergente como éste usando !important así que el estilo no cambia en la aplicación de nuevo estilo o clase:

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

Luego, cree una nueva clase de CSS:

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

Y agregar la clase a todos los elementos de la ventana, así por ejemplo:

<input value="posx" class="some_class PopupElement"/> 

Mi conjetura es que esto funcionaría, ya que no hay prioridad en la aplicación de atributos CSS como ... hasta donde sé. =)

Answer 3

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

Es posible poner overflow: hidden y posiblemente position: relative en un DIV que rodea a todos los objetos de edición para tratar de forzar a los elementos que sólo se dibujado dentro de ese DIV, por ejemplo:

<div style="overflow: hidden; position: relative"> 
    (Editor object buttons go here) 
</div> 

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

Answer 4

No es un problema de opacity es más importante que z-index, en lugar de ser z-index en relación con su contexto de apilamiento (ver z-index en la especificación CSS2).

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

Answer 5

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

opacity: 0.99; 

Answer 6

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í.