Question

我试图让一个div漂浮在一张桌子上，这样它就会在所有文本之上？

Answer 1

同时查看absolute positioning，也可以查看z-index（虽然这是您唯一的绝对定位内容，但您不需要它）。虽然还有其他方法可以让事情重叠，但这可能与您最相关。

很简单的例子：

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

我会将表格包装在“定位”的div中。我将div设置为position:relative，以便它不会中断其余文档内容的流程。

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

把它放在文本上面

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

只需更改顶部和左侧变量。

Answer 4

我同意TJ-z-index是要走的路 - 使用javascript和css / html将允许你隐藏/显示表格上方的“魔术浮动框”。

div漂浮在桌子上

4 个答案: