When you try to absolutely position element to tbody
, tr
and even td
you find out it does not work in most browsers. It works as expected in Firefox. Not in IE, Edge and Chrome.
position: relative
on tbody
, tr
and even td
is ignored. And then first parent with position: relative
is used as "anchor" for absolute placing.
BTW: position: relative
do works when you set tbody
to display: block
. But then you can be in trouble with widths of table rows. Generally, the child elements no more precisely behave as table elements. Columns are gone.. But it is not part of this question.
My questions are:
Why is position: relative
ignored on tbody
, tr
td
?
Is there any reason for this behavior?
Is it a bug which should be fixed?
.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:
position
Applies to: all elements excepttable-column-group
andtable-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 ontable-*-group
,table-row
,table-column
,table-cell
, andtable-caption
elements is undefined.
Related questions:
- Overlay on top of tbody
- Positioning relative to table-cell