div floating over table

Question

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

Answer 1

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