CODEWITHSUNDEEP
html
Rickstar
Rickstar

Reputation: 6189

div floating over table

I am trying to get a div to float over a table so it will be on top of all the text?

Upvotes: 9

Views: 51218

Answers (4)

T.J. Crowder
T.J. Crowder

Reputation: 1074385

Check out absolute positioning, and possibly z-index as well (although if this is your only absolutely-positioned content, you won't need it). Although there are other ways to get things to overlap, that's probably the most relevant for you.

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

Upvotes: 15

J Carroll
J Carroll

Reputation: 1391

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.

Upvotes: 1

jessegavin
jessegavin

Reputation: 75650

I would wrap the table in a "positioned" div. I set the div to position:relative so that it won't interrupt the flow of the rest of the documents contents.

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

Upvotes: 10

Jake
Jake

Reputation: 785

Float this over the text 

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

Just change the top and left variables.

Upvotes: 0

Related Questions