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

Question

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

El código es el siguiente:

<div class="opaque"></div> 
<div class="product-info"> 
    <img class="product-image" src="/Images/D3.jpg" /> 
    fsdfdsfsdfs 
</div> 

.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 el producto-INFO está ajustado en z-index 2 y opaca tiene índice z 1. Por lo tanto producto-información se debe mostrar de manera más opaca no debería estar desvanecido 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 anidado en lis que se establece en flotación a la izquierda con un ancho del 33%. Cuando la página está completamente cargada ($(window).load()) utilizo jQuery para detectar la altura máxima de todos los productos y aplicar esa altura al resto. 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 Google Chromes Inspect Element 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,

Richard

código completo conforme a 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.

<div id="BodyTag_ContentPanel"> 
    <div class="overlay-background"></div> 
    <div class="scroll-pane"> 
     <div> 
      <ul class="product-list"> 
       <li class="product"> 
        <div class="spacer"> 
         <div class="opaque"></div> 
         <div class="product-info"> 
          <img class="product-image" src="/Images/D3.jpg" /> 
          <div class="enlarge"> 
           <div class="image-enlargement"> 
            <span class="close"><img src="/Images/close.jpg" /></span> 
            <div class="enlargement"> 
             <div class="image-container"><img src="/Images/D3.jpg" /></div> 
             <div class="product-code"><span class="text-container">D3</span></div> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="product-code">D3</div> 
         <div class="clear"></div> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
</body> 

.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; 
} 

Answer 1

¡He encontrado la solución! Simplemente agregué 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 perderse el 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.

Answer 2

intente ajustar el índice z del elemento que se supone que está en la parte posterior de un número negativo, como -1 :)

Answer 3

Este es un gran tema. U puede verse en la página this de los desarrolladores de Firefox para una mejor comprensión del apilamiento de navegadores.

Answer 4

Sé que esto es antiguo, pero puede usar rgba() en lugar de opacidad y deshacerse de la 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.

Answer 5

si hay div externo para establecer position: fixed; y necesita position: fixed; allí agregue mismo 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án bien.

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

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