z-index no funciona como se esperaba (Chrome y Opera)

Tengo un div con clase “opaque” y otro con clase “product-info”, que están en el mismo nivel.

El código es el siguiente:

fsdfdsfsdfs
 .opaque { background-color: White; -moz-opacity:.60; filter:alpha(opacity=60); opacity:.60; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; } .product-info { padding: 5px; text-align: center; z-index: 2; } 

Tenga en cuenta que la información del producto está configurada en z-index 2 y opaque tiene z-index 1. Por lo tanto, la información del producto debe mostrarse sobre opaca, por lo que no debe desvanecerse. Sin embargo, la imagen dentro de la información del producto (y el texto) se desvaneció. Esto sucede tanto en Chrome como en Opera, por lo tanto, espero que esto sea lo que debería estar sucediendo ya que no son IE.

Hay muchos bits de código HTML como se muestra arriba, cada uno nested en lis que se establece en flotante a la izquierda con un ancho de 33%. Cuando la página está completamente cargada ( $(window).load() ) uso jQuery para detectar la altura máxima de todos los productos y aplicar esa altura a todo el rest. He intentado eliminar todo el jQuery en caso de que esto afecte al índice z, pero obtengo el mismo resultado solo con un aspecto desordenado.

He intentado utilizar la herramienta de revisión de elementos de Google Chromes y los elementos en cuestión muestran las características correctas.

¿Alguien puede ver lo que estoy haciendo mal aquí? He estado tratando de resolver esto por un par de días y me gustaría saber qué está pasando.

Gracias.

Saludos,

Ricardo

Código completo según lo solicitado:

Creo que esto es todo lo que se requiere. Crearé una página con solo este código en unos minutos, para ver si reproduce el problema.

 
  • D3
    D3
 .product-list { list-style: none; padding: 0; width: 100%; } .product { width: 33%; height: 25%; float: left; position: relative; } .product .spacer { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; margin: 10px; padding: 5px; border: 4px solid #C47F50; position: relative; } .product .opaque { background-color: White; -moz-opacity:.60; filter:alpha(opacity=60); opacity:.60; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; } .product .product-info { padding: 5px; text-align: center; z-index: 2; } .product .product-info .product-image { max-width: 200px; max-height: 200px; min-width: 150px; min-height: 150px; z-index: 2; } .product .product-code { position: absolute; bottom: -15px; width: 50%; margin-left: auto; margin-right: auto; background-color: White; text-align: center; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 4px solid #C47F50; line-height: 20px; z-index: 2; } .product .image-enlargement { position: fixed; display: none; padding: 5px; background-color: White; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 4px solid #C47F50; z-index: 103; } .product .enlarge { float: right; } 

¡¡He encontrado la solución!! Simplemente agregué la position: relative; a .product-info . ¡No puedo creer que fui tan estúpido como para no intentar eso en primer lugar! Gracias por sus esfuerzos @Thomas & Lazycommit. @Lazycommit su enlace fue útil – confirmó que mi código debería haber estado funcionando si no fuera por perder la position: relative; . Noté que habían establecido el atributo de posición para todos los divs en el ejemplo; esto es lo que me hizo probarlo.

Este es un gran tema. U puede mirar esta página desde los desarrolladores de Firefox para entender mejor el astackmiento de navegadores.

Intenta configurar el índice Z del artículo que se supone que está atrás en un número negativo, como -1 🙂

Sé que esto es antiguo, pero puedes usar rgba () en lugar de opacidad y deshacerte del div “producto-información”. Esto tiene el mismo efecto que desea, ya que rgba () usa un método diferente para causar transparencia que no hace que los elementos secundarios también sean transparentes. Hace que hacer el efecto que deseaba sea mucho más fácil.

si hay div externo para establecer la position: fixed; y necesitas position: fixed; allí agregue z-index igual que div interno. ex:

 .notifications { position: fixed; width: auto; max-width: 70%; z-index: 9999; } .notifications > div { position: relative; z-index: 9999; /* margin: 5px 0px;*/ /*default value*/ margin: 65px 10px; display: inline-block; } 

funcionará bien

Pero si la clase de notificaciones como a continuación no establece z-index en chrome correctamente.

 .notifications { width: auto; max-width: 70%; z-index: 9999; }