我能否将一个元素绝对定位在<td>元素的右上角？

Question

我有一个表格，我需要每个单元格的右上角有一个定位元素。

我已经阅读了几个其他问题，但它们似乎都无法解决这个问题。

其中一种解决方案是将单元格内部包装在具有相对定位的 div 中，但这不起作用，因为 div 不填充整个单元格，即使高度和宽度设置为 100%。

另一个解决方案是手动设置单元格的高度，并手动将 div 的高度设置为相同的值。这对我也不起作用，因为表格是被动态生成的，我不能保证单元格的特定大小。

这里是一些代码，说明了问题：

<table border="1">
<tr>
    <td>
        <div style="position:relative; height: 100%; background: yellow;">
            <p>This is some content</p>
            <div style="position:absolute; right:0px; top:0px; background: red;">
               absolute
            </div>
        </div>
    </td>
    <td>
        <div style="position:relative;  height: 100%;  background: yellow;">
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <div style="position:absolute;right:0px; top:0px; background: red;">
               absolute
            </div>
        </div>
    </td>
</tr>   

这是一个示例http://jsfiddle.net/hqtEQ/ 我能否将红色div放在每个单元格的右上角？

- user1850886

Answer 1

with to align the content to the top.

元素的默认垂直对齐方式为居中。因此，如果您不担心单元格中其他内容，只需将替换为即可将内容对齐到顶部。

<td>

使用

<td style="vertical-align: top;">

添加一个CSS类（或者进行其他相应的CSS样式设置），你的布局将按照预期工作。

查看http://jsfiddle.net/hqtEQ/1/

- Adrian Wragg

---

有没有一种方法可以让包装 div 垂直填充整个单元格？这个解决方案适用于将绝对 div 放入左上角，但希望能够保持主要内容垂直居中。现在它看起来像这样：http://jsfiddle.net/5rvLY/ - user1850886

这在Chrome和IE中有效，但在Firefox中无效。根据http://www.w3.org/TR/CSS21/visuren.html#propdef-position的说明，position：relative不是<td>元素上的有效CSS。 - user1850886

在这种情况下，你的答案可能是“不”，你需要考虑使用div元素。如果你正在使用表格来布局内容 - 而不是用于显示表格数据 - 这通常是推荐的做法。 - Adrian Wragg

我正在显示实际的表格数据。不过，我可能还是得转换成div... - user1850886

@user1850886，这是任何元素的有效CSS，规范只是没有指定通过改变位置来偏移单元格本身的确切效果（例如折叠边框会发生什么）。对于abs. pos.元素的包含块定义不针对td作任何异常处理。Firefox的行为是已知的错误。 - Ilya Streltsyn

Answer 2

Firefox 似乎是唯一一个无法使用 position:relative 直接定位到 td 元素的浏览器（因为 bug 63895 的原因）。其他浏览器在这里没有任何问题。自版本22以来，Firefox 支持最新的 Flexbox 语法，它可以模拟表格行为，并且不会出现 position: relative 的问题。那么，对于 Firefox，使用它作为解决方法如何？

td {
    position: relative;
    background: yellow;
}

:-moz-any-link > html, tr {
    display: flex;
    flex-direction: row;
}

:-moz-any-link > html, td {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

小提琴

- Ilya Streltsyn