Geek Answers Handbook

Div floating at the table

Am I trying to make a div float over a table so that it is on top of all the text?

+7
html
source share
4 answers

Note the absolute positioning and possibly z-index (although if this is your only absolutely positioned content, you won’t need it). While there are other ways for things to overlap, this is probably most relevant to you.

A very simple example:

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 | a source

+13
source share

I would wrap the table in a "positioned" div. I set the div to position:relative so that it does not interrupt the flow of the rest of the contents of the document.

 <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>
+7
source share
Swim over the text
 <style> #floatme{ position: absolute; top: XXpx; left: XXpx; } </style>

Just change the top and left variables.

0
source share

I agree with TJ - z-index is the way to go - using javascript and css / html will allow you to hide / show this "magic floating box" above the table.

0
source share

More articles:


All Articles