html - 在 TD 中使用相对位置/绝对位置？

Question

我有以下代码:

<td style="position: relative; min-height: 60px; vertical-align: top;">
    Contents of table cell, variable height, could be more than 60px;

    <div style="position: absolute; bottom: 0px;">
        Notice
    </div>
</td>

这根本行不通。出于某种原因，position:relative命令未在 TD 上读取，通知 DIV 被放置在我页面底部的内容容器之外。我试图将 TD 的所有内容放入一个 DIV 中，例如:

<td>
    <div style="position: relative; min-height: 60px; vertical-align: top;">
        Contents of table cell, variable height, could be more than 60px;

        <div style="position: absolute; bottom: 0px;">
            Notice
        </div>
    </div>
</td>

但是，这会产生一个新问题。由于表格单元格内容的高度是可变的，所以通知 DIV 并不总是位于单元格的底部。如果表格单元格超出 60px 标记，但其他单元格均未超出，则在其他单元格中，通知 DIV 位于下方 60px 处，而不是底部。

Answer 1

这是因为根据 CSS 2.1 , position: relative 对表格元素的影响未定义。说明这一点，position:relative 在 Chrome 13 上有预期的效果，但在 Firefox 4 上没有。你的解决方案是在你的内容周围添加一个 div 并将 position: relative 在 div 而不是 td 上。下面说明了使用 position: relative (1) 在 div 上 good)，(2) 在 td(no很好)，最后 (3) 在 td 内的 div 上(再次很好)。

<table>
  <tr>
    <td>
      <div style="position:relative;">
        <span style="position:absolute; left:150px;">
          Absolute span
        </span>
        Relative div
      </div>
    </td>
  </tr>
</table>