Html 在 TD 中使用位置相对/绝对？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4564638/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Position Relative/Absolute within a TD?
提问by Jason Axelrod
I have the following code:
我有以下代码：
<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>
This does not work at all. For some reason, the position:relative command isn't being read on the TD and the notice DIV is being placed outside of the content container at the bottom of my page. I have tried to put all the contents of the TD into a DIV such as:
这根本行不通。出于某种原因，位置：相对命令没有在 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>
However, this creates a new problem. Since the height of the contents of the table cell is variable, the notice DIV isn't always at the bottom of the cell. If a table cell stretches beyond the 60px marker, but none of the other cells do, then in the other cells, the notice DIV is at 60px down, instead of at the bottom.
然而，这产生了一个新问题。由于表格单元格内容的高度是可变的，通知 DIV 并不总是在单元格的底部。如果表格单元格超出 60 像素标记，但没有其他单元格超出，则在其他单元格中，通知 DIV 位于向下 60 像素处，而不是底部。
回答by avernet
This is because according to CSS 2.1, the effect of position: relativeon table elements is undefined. Illustrative of this, position: relativehas the desired effect on Chrome 13, but not on Firefox 4. Your solution here is to add a divaround your content and put the position: relativeon that divinstead of the td. The following illustrates the results you get with the position: relative(1) on a divgood), (2) on a td(no good), and finally (3) on a divinside a td(good again).
这是因为根据CSS 2.1，position: relative对 table 元素的影响是未定义的。说明了本，position: relative有在Chrome 13的预期效果，但不能在Firefox 4，在这里你的解决方案是增加一个div在你的内容，并把position: relative对div代替td。下面说明了在position: relative(1)div上好)、(2) 上td（不好）和最后 (3)div内 a td（再次好）时得到的结果。
<table>
<tr>
<td>
<div style="position:relative;">
<span style="position:absolute; left:150px;">
Absolute span
</span>
Relative div
</div>
</td>
</tr>
</table>回答by Sergey Onishchenko
This trick also suitable, but in this case align properties (middle, bottom etc.) won't be working.
这个技巧也适用，但在这种情况下，对齐属性（中间、底部等）将不起作用。
<td style="display: block; position: relative;">
</td>
回答by Xavier Deva Arul
Contents of table cell, variable height, could be more than 60px;
表格单元格内容，高度可变，可以大于60px；
<div style="position: absolute; bottom: 0px;">
Notice
</div>
回答by Kyle
With regards to your second attempt, did you try using vertical align ? Either
关于您的第二次尝试，您是否尝试过使用 vertical align ？任何一个
<td valign="bottom">
or with css
或使用 css
vertical-align:bottom
回答by daigorocub
also works if you do a "display: block;" on the td, destroying the td identity, but works!
如果您执行“显示：块；”也可以使用 在 td 上，破坏了 td 身份，但有效！
