Positioning relative to table-cell

Question

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.

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

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*/

I mean do you have any technique using :before or :after for eg .someclass:before{display: inline-block; content: " "; position: relative;} like this.... — Bhojendra Rauniyar, May 03 '13 at 10:44

score 1 · Answer 1 · answered Oct 03 '18 at 10:19

IMHO: In browsers which support CSS3 position:relative on table elements should work. It now works only in Firefox.

Sources:

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

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

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 About 'stacking context' but that is not the subject of this question

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.

Related questions:

score 0 · Answer 2 · answered May 03 '13 at 09:51

There is a kinda hacky way without additional elements using negative margin:

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

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

You simply position the element relative to the cell, while eliminating its dimensional impact on other elements by adding negative margins on all sides in correlation to the elements own dimensions.

Problem here is that the positioned element must have fixed dimensions (can't work with percentage negative margin because that depends on the outer element).

The other, probably more common solution is to add an additional wrapper element inside the cell width position relative and position other child elements absolute to this wrapper.

Please note that I'm not using table but something with display property to table , table-cell — Bhojendra Rauniyar, May 03 '13 at 10:45
That should not make any difference, they behave the same in this matter. — Simon, May 03 '13 at 12:16

Positioning relative to table-cell

2 Answers2

Sources:

Related questions:

Linked