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

Question

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

我有以下代码：

<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上。下面说明了（1）关于商品的结果，（2）关于（不好），最后（3）关于a&nbsp;（好的）。divtdposition: relativedivtddivtd<table> &nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;<td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;style="position:relative;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;style="position:absolute;&nbsp;left:150px;"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Absolute&nbsp;span&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Relative&nbsp;div&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;</td> &nbsp;&nbsp;</tr></table>

Answer 2

这个技巧也很合适，但在这种情况下，对齐属性（中间，底部等）将不起作用。<td&nbsp;style="display:&nbsp;block;&nbsp;position:&nbsp;relative;"></td>

Answer 3

表格单元格的内容，可变高度，可以超过60px;<div&nbsp;style="position:&nbsp;absolute;&nbsp;bottom:&nbsp;0px;"> &nbsp;&nbsp;&nbsp;&nbsp;Notice</div>