div flotando sobre la tabla

Question

Estoy tratando de hacer que un div flote sobre una tabla para que quede encima de todo el texto?

Answer 1

Consulte absolute positioning, y posiblemente z-index también (aunque si este es su único contenido absolutamente posicionado, no lo necesitará). Aunque hay otras maneras de hacer que las cosas se superpongan, probablemente sea la más relevante para ti.

ejemplo muy sencillo:

CSS:

#target { 
    position: absolute; 
    left: 50px; 
    top: 100px; 
    border: 2px solid black; 
    background-color: #ddd; 
} 

HTML:

<p>Something before the table</p> 
<div id="target">I'm on top of the table</div> 
<table> 
    <tbody> 
    <tr> 
     <td>Text in the table</td> 
     <td>Text in the table</td> 
    </tr> 
    <tr> 
     <td>Text in the table</td> 
     <td>Text in the table</td> 
    </tr> 
    <tr> 
     <td>Text in the table</td> 
     <td>Text in the table</td> 
    </tr> 
    <tr> 
     <td>Text in the table</td> 
     <td>Text in the table</td> 
    </tr> 
    </tbody> 
</table> 

Live copy | source

Answer 2

flotador esta sobre el texto

<style> 
    #floatme{ 
     position: absolute; 
     top: XXpx; 
     left: XXpx; 
    } 
</style> 

Sólo cambiar las variables superior e izquierdo.

Answer 3

Me gustaría envolver la mesa en un div "posicionado". Establecí el div en position:relative para que no interrumpa el flujo del resto del contenido de los documentos.

<div style="position: relative"> 
    <table style="width: 500px;"> 
    <tr> 
     <td>Table Text</td> 
    </tr> 
    </table> 

    <div style="position: absolute; top: 0; left: 0; width: 500px; background: green;"> 
    I am on TOP of the table! 
    </div> 
</div> 

Answer 4

Estoy de acuerdo con TJ - z-index es el camino a seguir - usando javascript y css/html le permitirá ocultar/mostrar esta "magia flotando caja" por encima de la mesa.