div floating over table

Question

Sto provando a far divare un div su un tavolo in modo che sia sopra tutto il testo?

Answer 1

Controlla absolute positioning e possibilmente anche z-index (anche se questo è il tuo solo contenuto posizionato in modo assoluto, non ne avrai bisogno). Sebbene ci siano altri modi per fare in modo che le cose si sovrappongano, questa è probabilmente la più rilevante per te.

esempio molto semplice:

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

Float questo sul testo

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

Basta modificare le variabili superiore e sinistro.

Answer 3

Vorrei avvolgere il tavolo in un div "posizionato". Ho impostato il div su position:relative in modo che non interrompa il flusso del resto del contenuto dei documenti.

<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

Sono d'accordo con TJ - z-index è la strada da percorrere - utilizzando JavaScript e CSS/html vi permetterà di nascondere/mostrare questa "scatola magica galleggiante" sopra la tabella.