相对于表格单元的位置

Question

'position：relative'对table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table-caption元素的影响未定义。

来源： http ： //www.w3.org/TR/CSS21/visuren.html#propdef-position

有什么想法要相对的位置：我使用：before或：after选择器将显示属性设置为table-cell？

.someclass{display: table-cell; position: relative; z-index: auto;} 
/*this won't work*/

Answer 1

恕我直言： 在支持CSS3 position:relative 浏览器中 position:relative对于表格元素应该起作用 。 现在，它仅在Firefox中有效。

资料来源：

https://www.w3.org/TR/css-position-3/#valdef-position-relative

https://www.w3.org/TR/css-position-3/#property-index

属性名称： position适用于：除table-column-group和table-column以外的所有元素

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#relative关于“堆栈上下文”，但这不是此问题的主题

当z-index的值不是auto时，此值（ position: relative ）创建一个新的堆叠上下文。 它对table-*-group ， table-row ， table-column ， table-cell和table-caption元素的影响是不确定的。

相关问题：

1. 覆盖在顶部
2. 是大多数浏览器的错误吗？：忽略相对于“ tbody”，“ tr”和“ td”的位置？

Answer 2

有一种没有其他元素使用负余量的hacky方法：

http://jsfiddle.net/CvyxM/1/

td span {
    display: block;
    width: 10px;
    height: 10px;
    margin: -5px;
    background: red;
    position: relative;
    top: -5px;
    left: -5px;
}

您只需相对于像元放置元素，即可通过在所有侧面上增加与元素自身尺寸相关的负边距来消除其对其他元素的尺寸影响。

这里的问题是，定位的元素必须具有固定的尺寸（不能使用负边距百分比，因为这取决于外部元素）。

另一种可能更常见的解决方案是在相对于单元格宽度的位置内添加一个附加包装元素，并将其他子元素绝对定位到该包装。