Z-index no funciona dentro de una tabla

Question

Tengo un problema al posicionar un div absoluto fuera de una tabla, no soy un gran admirador de la distribución de tablas, pero encontré un proyecto existente con un diseño de tabla. El código es el siguiente

<td colspan="2" align="right" style="padding-top:3px; padding-right:15px; padding-bottom:15px;" width="600px"> 
        <table cellpadding="0" cellspacing="0" border="0"> 
         <tr><td height="37px" width="600px" style="background-image:url('P--IMG--P/welcomepanel/header.png'); background-repeat:no-repeat; background-position:bottom left;"><span class="heading" id="I--heading_text--I" style="padding-top:3px;"></span></td></tr> 
         <tr> 
          <td align='left' valign='middle' width="600px" height="522px" style="background-image:url('P--IMG--P/welcomepanel/middelblock_repeat.png'); background-repeat: repeat-y; padding-top:0px"> 
           <div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;"> 
            [--C--comp--C--] 
           </div> 
          </td> 
         </tr> 
         <tr><td><img src="P--IMG--P/welcomepanel/middelblock_roundcorners.png"/></td></tr> 
        </table> 
       </td> 

Donde "[-C - COMP - C--]" es la cadena de reemplazo para un Fckeditor que contiene una imagen dentro de un div, he puesto que z de div índice a 10 pero no quiere salir de la mesa ... y su posición es absoluta.

Háganme saber lo que podría estar haciendo mal.

Me he dado cuenta de que el problema viene con el desbordamiento de desplazamiento en el contenedor td, si elimina el overflow-y:scroll funciona bien, pero el problema es que necesito tener ese desbordamiento ya que hay mucho contenido dentro ese td. No sé qué hacer ahora. :(.. alguien por favor ayudar a un hermano!

necesito el pequeño mapa para estar fuera de la mesa y el mapa grande para permanecer dentro de la tabla, se muestra la imagen pequeña cuando se pasa sobre la mapa grande con Jquery para hacer zoom, que se carga en el controlador de fábrica. Espero que esto ayude ..

Answer 1

Para que el índice z funcione correctamente, cada elemento que tenga una propiedad z-index también debe tener cualquier posición establecida (por ejemplo, posición : relativo). Además, le asignaría a la tabla una posición y un índice z para que los dos puedan comparar.

Answer 2

Al decir que usted quiere al elemento absolutamente posicionado "para salir de la mesa", ¿quiere decir que quiere que se ubique fuera de la mesa, no según la ubicación de la mesa? ¿O quiere decir que lo quiere ubicado dentro de la mesa, pero no recortado a los bordes de la mesa o superpuesto con otro contenido?

Si es el primero, le sugiero mover el DIV completamente posicionado en otro lugar del código. ¿Por qué ponerlo dentro de la mesa si no se va a mostrar allí? Simplemente hace que el contexto de apilamiento y las propiedades de desbordamiento sean más difíciles de solucionar.

Si se trata de lo último, es posible que desee ajustar o eliminar las propiedades overflow-x y overflow-y en el div que contiene su elemento completamente posicionado. Es concebible que el navegador siga aplicando las reglas de recorte de desbordamiento a los elementos secundarios, incluso si están absolutamente posicionados.

Además, tenga en cuenta que z-index sólo está destinada a afectar el orden de apilamiento de los hermanos elementos. Los elementos que están en el mismo nivel del árbol, en otras palabras, otros elementos dentro de su div de 500px de altura, se apilarán de acuerdo con su orden z, pero los nodos padre e hijo juegan según reglas diferentes.

Si esta respuesta no ayuda, entonces tal vez esté malinterpretando lo que quiere hacer. ¿Puedes publicar una imagen de cómo se comporta y describir cómo te gustaría que se comporte?

Editar en respuesta a la imagen que se está colocado:

Creo que lo que quiere hacer en este caso es conseguir que el pequeño mapa fuera de la DIV de desplazamiento de alguna manera. ¿Puedes cambiar esto ...

<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;"> 
    [--C--comp--C--] 
</div> 

... a algo como esto?

[--C--compSmallMap--C--] <!-- Small map code goes here --> 
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;"> 
    [--C--compBigMap--C--] <!-- Big map code goes here --> 
</div> 

Si no es así, ¿podría cambiar el código que está siendo insertado de manera que se crea el pequeño mapa en un nivel superior en el código? Por ejemplo, puede agregar elementos al nodo raíz usando document.getElementsByTagName("body")[0].appendChild(element); (podría haber una mejor manera que eso, solo un ejemplo). Usando eso, o algo así, es posible que pueda poner su pequeño mapa más arriba en el árbol de documentos, lo que evitaría que se recorte.