Problema de superposición mayor / menor de CSS usando el comando de desplazamiento

Tengo una pequeña tienda / sitio web de cámaras (jdsrde.com) Actualmente actualizando y quería agregar un efecto de zoom para que cuando se desplaza (coloca el cursor) sobre las imágenes, obtenga una vista ampliada sin hacer clic en la página del producto. Como una miniatura, tengo como 50 imágenes.

El código funciona, pero por alguna razón la imagen de "zoom" siempre va detrás de las otras imágenes de la página. Quería ver qué puedo hacer para solucionar este problema de modo que la imagen de "zoom" vaya al frente de las capas de la página. He cambiado el índice z tantas veces, pero en vano me siento tan estúpido ya que he estado tratando de resolver esto durante horas sin éxito y sé que la respuesta es muy fácil.

No quiero usar java, prefiero css.

aquí están los códigos que estoy usando. Cualquier ayuda será agradecida !!!

CSS >>>>

#zoom { position: relative; top: 10px; left: 10px; width: 75px; background-color: rgb(255, 255, 255); }
#zoom a.p1, #zoom a.p1:visited { border: 0pt none ; background: rgb(255, 255, 255) none repeat scroll 0%; display: block; width: 75px; height: 75px; text-decoration: none; top: 0pt; left: 0pt; }
#zoom a img { border: 0pt none ; }
#zoom a.p1:hover { text-decoration: none; background-color: rgb(140, 151, 163); color: rgb(0, 0, 0); }
#zoom a .large { border: 0px none ; display: block; position: fixed; width: 1px; height: 1px; top: -1px; left: -1px; }
#zoom a.p1:hover .large { border: 1px solid black; display: block; position: fixed; top: 0px; left: 250px; width: 300px; height: 200px; }

xhtml (de una de las imágenes "zoom") >>>>>>

<div id="zoom" style="height: 106px; width: 150px;  height: 106px; left: 1400px; position: absolute; top: 325px; width: 150px; z-index: 1; " class="tinyText">
    <div style="position: relative; width: 150px; ">
        <a class="p1" href="Camera_Sears_35_RF.html" title="Camera_Sears_35_RF.html">
            <img src="All2020_files/shapez" alt="" style="height: 106px; left: 0px; position: absolute; top: 0px; width: 150px; " />
            <img class="large" src="All2020_files/z" title="Enlarged view of image" alt="Enlarged view of image" />
        </a>
    </div>
 </div>

¡¡Gracias de nuevo!!

preguntado el 08 de enero de 11 a las 17:01

Solo intente las líneas de código con cuatro espacios. Incluso está escrito justo al lado del cuadro de texto cuando crea una nueva pregunta: ► código de sangría por 4 espacios. -

1 Respuestas

Z-index solo afecta a otros elementos posicionados en el mismo 'contexto de apilamiento'. Dado que el div dentro de #zoom también está posicionado relativo, el índice z en el ancla no tiene ningún efecto.

Intente aplicar el índice z al div, no al ancla. Entonces, agregar lo siguiente debería ayudar:

#zoom>div:hover {
  z-index: 9;
}

Respondido el 08 de enero de 11 a las 21:01

Gracias por tu respuesta. Me lo había imaginado, pero no pude hacerlo funcionar. Lamento preguntar esto, pero he intentado muchas formas de conseguirlo. ¿Podrías escribirlo un poco más laico? Normalmente podía entender, pero la simplicidad me ha vuelto loco. Voy a jugar con esto aunque. ¡¡Gracias de nuevo!! - usuario569757

No estoy seguro de lo que quieres decir. Lo que no entiendes, y lo que es más importante, ¿resolvió el problema el CSS proporcionado? ¿O no entiendes dónde ponerlo? - Gerben

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.