Me pase una miniatura de la imagen mediante el uso de CSS solamente:

<style type='text/css'>
#like_table td a{z-index:2;}
#like_table .tooltip
{
    position: relative;
    z-index:1;
}
#like_table .tooltip a
{
  z-index:2;
}
#like_table .tooltip span
{
  z-index:9999;
  display:none;
}
#like_table .tooltip:hover span
{
          position:absolute;
          display:block;
          top:1.5em;
          left:2em;
          border:1px solid black;
          background-color:white;
          padding:0.2em;
}
#like_table td .tooltip .tooltip_thumb{
            z-index:99999;
}
</style>

<table id='like_table' class='smallfont' border='0' cellpadding='0' cellspacing='0'><tr><td>
                    <div class='like_row'>
                        <a href='#user1' class='nul'>User 1</a> liked <a href='#link' class='tooltip'>forum post<span><img src='image.jpg' class='tooltip_thumb' alt='' /></span></a>
                        <span class='by_user'>by <a href='#user2' class='nul'>User 2</a></span>
                    </div>
                    </td>
</tr>

Por desgracia, el z-index en el espacio y el hover de la imagen no parece funcionar.
La imagen se muestra «abajo», el nombre de usuario (con la clase by_user), pero por encima de la normal de texto.

¿Cómo puedo hacer el overlay /la descripción se muestran en la parte superior?

InformationsquelleAutor reggie | 2013-01-17

2 Comentarios

  1. 3

    Eliminar todos tus z-index y acaba de salir de la z-index: 9999 en .tooltip

    • En .descripción, no funcionó. Pero el trabajo cuando he añadido a «.descripción lapso». Gracias!
    • Me alegro de que podría ayudar.
  2. 4

    Su z-index no funcionará debido a que todos estos elementos no están en el mismo nivel. Todos ellos están anidados en cada uno de los otros. Z-index sólo funciona en los elementos en el mismo nivel en DOM como este:

    <div class="level1">
       <span class="level2"> 1 </span>
       <span class="level2"> 2 </span>
       <span class="level2"> 3 </span>
    </div>

    que va a trabajar si establece z-index en los vanos, pero si usted pone en, no tendrá ningún efecto porque es «superior» elemento.

    edit: y en tu css que se han escrito .tooltip a pero usted no tiene <a> en .tooltip, por lo que ción de a.tooltip supongo.

    • Gracias por la info!
    • entonces, ¿qué debo hacer si quiero algo en el mismo nivel a la pantalla en la parte superior? Quiero mostrar un texto de información sobre algunos otros elementos de la página web y no estoy seguro de si debo estar en movimiento, la descripción a un nivel superior (hace herencia de css un dolor) o si existe otro método que debe utilizar para forzar la descripción para la parte superior
    • No hay manera de elemento de la fuerza para estar en la parte superior de cada elemento en la página. Para hacerlo, usted debe ser muy preciso con todos los z-índices toda la página. Voy a recomendar el uso de javascript plugin que se construye sobre la marcha cada vez que se coloca el ratón sobre un elemento. Se cree que en el primer nivel de la DOM con la posición calculada y poner muy grandes de z-index para asegurarse de que se superpone a todos los otros elementos.

Dejar respuesta

Please enter your comment!
Please enter your name here