相对于表格单元格的定位 [英] Positioning relative to table-cell

问题描述

'position:relative' 对 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell 和 table 的影响-caption 元素未定义.

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

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

是否有任何想法可以使用 :before 或 :after 选择器相对于我将显示属性设置为表格单元格的位置?

Is there any idea to position relative to which I have set display property to table-cell using :before or :after selector?

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

推荐答案

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

IMHO: In browsers which support CSS3 position:relative on table elements should work. It now works only in 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

Property name: position Applies to: all elements except table-column-group and table-column

https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative关于堆叠上下文"但这不是这个问题的主题

https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative About 'stacking context' but that is not the subject of this question

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

This value (position: relative) creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

相关问题:

1. 在 tbody 上叠加
2. 大多数浏览器都有问题?: 忽略'tbody'、'tr' 和'td' 上的相对位置?

这篇关于相对于表格单元格的定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！