html - 大多数浏览器中的错误？ : Ignoring position relative on 'tbody' , 'tr' 和 'td' ？

Question

当您尝试将元素绝对定位到 tbody、tr 甚至 td 时，您会发现它在大多数浏览器中都不起作用。它在 Firefox 中按预期工作。不在 IE、Edge 和 Chrome 中。

tbody、tr 甚至 td 上的

position: relative 都会被忽略。然后使用 position: relative 的第一个父级用作绝对放置的“ anchor ”。

顺便说一句:当您将 tbody 设置为 display: block 时，position: relative 会起作用。但是你可能会遇到表格行的宽度问题。通常，子元素不再精确地表现为表元素。专栏不见了..但这不是这个问题的一部分。

我的问题是:
为什么 position: relative 在 tbody、tr td 上被忽略？
这种行为有什么原因吗？
这是一个应该修复的错误吗？

.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>

来源:

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

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. Overlay on top of tbody
2. Positioning relative to table-cell

Answer 1

MDN 所说的在 CSS2 中是准确的。多年来，position: relative 对内部表格框的影响一直未定义 (§9.3.1)，并且实现远非可互操作。

最近才在 css-position-3 中更改，现在是 defines the effects as follows :

The effect of position: relative on table elements is defined as follows:

• table-row-group, table-header-group, table-footer-group and table-row offset relative to its normal position within the table. If table-cells span multiple rows, only the cells originating in the relative positioned row is offset.

• table-column-group, table-column do not offset the respective column and has no visual affect when position: relative is applied.

• table-caption and table-cell offset relative to its normal position within the table. If a table cell spans multiple columns or rows the full spanned cell is offset.

然而实现仍然到处都是，这是因为 CSS 表格模型的实现仍然是困惑的、不可预测的、不完全可互操作的并且充满了没人愿意用 10 英尺长的杆子触碰的历史包袱.您可以通过浏览 css-tables-3 spec 来判断和 the CSSWG's GitHub issues for that spec .

话虽如此，浏览器供应商正在缓慢而谨慎地解决像这样的内部表格框定位这样的切线问题。只是不要指望快速进步。

BTW: position: relative do works when you set tbody to display: block.

是的，因为这样一来，tbody 就不再像 tbody 那样工作了，而是开始像 div 那样工作了，你就彻底破坏了 CSS表的结构。