0

'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 选择器将显示属性设置为表格单元格的位置？

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

2 回答 2

1

恕我直言：在表格元素上支持 CSS3 的浏览器中 应该可以工作。它现在仅适用于 Firefox。position:relative

资料来源：

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 关于“堆叠上下文”，但这不是这个问题的主题

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

相关问题：

  1. 覆盖在 tbody 顶部
  2. 大多数浏览器中的错误？：忽略“tbody”、“tr”和“td”上的相对位置？
于 2018-10-03T10:19:57.137 回答
0

有一种不使用负边距的额外元素的 hacky 方式：

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

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

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

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

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

于 2013-05-03T09:51:33.750 回答