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

是否有任何想法相对于我将display属性设置为table-cell的位置使用：before或：after selector？

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

Answer 1

恕我直言：在支持CSS3 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/en-US/docs/Web/CSS/position#relative 关于“堆叠环境”，但这不是这个问题的主题

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

相关问题：

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;
}

您只需将元素相对于单元格定位，同时通过在所有边上添加与元素自身尺寸相关的负边距来消除其对其他元素的尺寸影响。

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

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

相对于表格单元格的定位

2 个答案:

来源：

相关问题：