如何在一个简单的 html 表格 td 上直接覆盖一个简单的 div？答案

【问题标题】：How to overlay a simple div directly on top of a simple html table td?如何在一个简单的 html 表格 td 上直接覆盖一个简单的 div？
【发布时间】：2014-03-22 05:00:55
【问题描述】：

我有一个简单的 html 表，其中每个 tr 都有一个用于标签的 td 和一个用于内容的 td。我正在寻找最正确/最有效的方法来在“内容 td”的顶部绘制一个 div，使标签可见。如果可能，计划是让第二个 td 被覆盖“隐藏”。（如果有任何帮助，我会在页面上包含引导程序 3）

提前谢谢你

<tbody>
  <tr>
    <td>My Label</td>
    <td>Overlay some div on top of this element</td>
  </tr>
</tbody>

【问题讨论】：

我在 DOM 中还没有它（虽然它可能存在并且只是隐藏，如果这样可以加快这个过程）

标签： html css twitter-bootstrap-3

【解决方案1】：

为什么不将 div 插入内容 td 并使用绝对位置。像这样：http://jsfiddle.net/8RuZe/

td.content {
    position: relative;
}
div.over {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
}

我已经在从 IE8 到 IE11 的所有主流浏览器上测试过这个方法。

祝你好运。

【讨论】：