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

表格单元格的内容，高度可变，可大于60px；
通知

这根本不起作用。出于某种原因，TD上没有读取position:relative命令，而notice 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>

表格单元格的内容，高度可变，可大于60px；
通知

---

然而，这带来了一个新问题。由于表格单元格内容的高度是可变的，所以notice DIV并不总是位于单元格的底部。如果表格单元格超出了60px标记，但其他单元格都没有，那么在其他单元格中，通知DIV位于60px下方，而不是底部。

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

---

这是因为根据，未定义

position:relative

对表元素的影响。为了说明这一点，

position:relative

在Chrome13上有理想的效果，但在Firefox4上没有。您的解决方案是在内容周围添加一个

div

，并将

位置：relative

放在

div

上，而不是

td

。以下说明了使用

位置得到的结果：相对
（1）在
div
良好上，（2）在
td
上（不好），最后（3）在
td
内部的
div
（再次良好）




绝对跨度
相对div
如果您在td上执行“显示：阻止；”操作，销毁td标识，也会起作用，但会起作用
 
表格单元格的内容，高度可变，可大于60px

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


通知

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

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


是否有使用该表的理由？我假设表的其余内容将移动此单元格的内容。如果表格是必需的，您可以使用两行，顶部为valign=top，底部为valign=bottom。如果您使用表格进行布局，我建议您不要这样做。使用表格来显示数据是可以的，但它们并不适合于布局。它适合于日历。。。所以一个表格网格是必不可少的：那是行不通的。。。如果我这样做，那么表格单元格的内容将与底部相隔60像素；而不是在顶部。div高度不会是100%，因此相对于底部的相对位置：0没有任何影响。请注意，本例中的“绝对跨度”不会影响td高度，这基本上使表的使用变得无用。@Softlion:将
td
的整个内容包装在
div
中如何，设置为
width:100%
和
height:100%
，应用从td到div的任何填充，并将其设置为
relative
？其想法是在
td
上方创建一个薄的包含层，其作用类似于
td
本身，但它是一个
div
。它对我有效。HTML源代码的链接已失效。你能更新/刷新它吗？对于那些在2019年或之后找到这个答案的人来说：虽然CSS2.1确实说
position:relative
对内部表格部件的影响没有定义，但这意味着表格部件本身的行为（例如，在
边框折叠：折叠
的情况下，如果通过
位置：相对
移动
td
的边框，那么它应该如何表现还不清楚）。它没有将它们排除在绝对定位的子体之外。因此Firefox的行为只是一个bug，在2014年修复。
<div style="position: absolute; bottom: 0px;">
    Notice
</div>

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