Trying to absolutely position elements within tbody, tr, and td may not work in certain browsers. While it behaves as expected in Firefox, it does not work properly in IE, Edge, and Chrome.
If you apply position: relative to tbody, tr, or td, it will be ignored by the browser. Instead, the first parent element with position: relative will be used as the anchor for absolute positioning.
One workaround is setting display: block on the tbody element, but this can lead to issues with table row widths and the behavior of child elements no longer resembling table elements precisely. However, that aspect is beyond the scope of this question.
My inquiries are:
Why is position: relative disregarded on tbody, tr, td?
Is there a specific reason behind this behavior?
Should this be considered a bug that needs addressing?
.example {
border: 1px solid #ccc;
position: relative;
background: #eee;
margin: 2em;
padding: 2em;
width: 50%;
}
.abs {
display: block;
position: absolute;
left: 100%;
top: 0;
}
table {
//border: 5px solid rgba(255,200,0,0.2);
border-collapse: collapse;
}
tbody {
border: 2px solid red;
position: relative;
}
td {
border: 1px solid lime;
padding: 1em;
}
.text--red {
color: red;
}
.text--gray {
color: gray;
}<ul>
<li class="text--gray">Gray background is table wrapper with position relative.</li>
<li class="text--red">Redline is tbody with position relative.</li>
</ul>
<div class="example">
<table>
<tbody>
<tr>
<td>tbody1>tr1>td</td>
</tr>
<tr>
<td>tbody1>tr2>td</td>
</tr>
<tr class="abs abs--1">
<td>tbody1>tr3>td absolute position to tbody</td>
</tr>
</tbody>
<tbody>
<tr>
<td>tbody2>tr1>td</td>
</tr>
</tbody>
<tbody>
<tr>
<td>tbody3>tr1>td</td>
</tr>
<tr class="abs abs--2">
<td>tbody3>tr2>td absolute position to tbody</td>
</tr>
</tbody>
</table>
</div>Sources:
https://www.w3.org/TR/css-position-3/#valdef-position-relative
https://www.w3.org/TR/css-position-3/#property-index
Property name:
positionApplies to: all elements excepttable-column-groupandtable-column
https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative Regarding 'stacking context,' although it's not the main focus here
This value (
position: relative) creates a new stacking context when the value of z-index is not auto. Its effect ontable-*-group,table-row,table-column,table-cell, andtable-captionelements is undefined.
Related questions:
- Overlay on top of tbody
- Positioning relative to table-cell