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

这根本不起作用。出于某种原因，在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 1}}而不是position: relative。以下说明了div（1）td上的div（1），td（不好）上的结果，最后（3）{ {1}} <table> <tr> <td> <div style="position:relative;"> <span style="position:absolute; left:150px;"> Absolute span </span> Relative div </div> </td> </tr> </table>内（又好）。

{{1}}

Answer 2

这个技巧也很合适，但在这种情况下，对齐属性（中间，底部等）将不起作用。

<td style="display: block; position: relative;">
</td>

Answer 3

关于您的第二次尝试，您是否尝试使用垂直对齐？ 任

<td valign="bottom">

或与css

vertical-align:bottom

Answer 4

    表格单元格的内容，可变高度，可以超过60px;

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

Answer 5

如果您执行“display：block;”也可以。在td上，摧毁了td身份，但是有效！