大多数浏览器中的错误？:忽略'tbody','tr'和'td'的相对位置？

Question

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

position: relative在tbody,tr甚至td被忽略.然后第一个父母position: relative用作绝对放置的"锚".

BTW:position: relative当你设置做作品tbody来display: block.但是你可能会遇到表行宽度的麻烦.通常,子元素不再像表元素那样精确地表现.列已经消失..但它不是这个问题的一部分.

我的问题是:
为什么是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

属性名称:position适用于:除table-column-group和之外的所有元素table-column

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

position: relative当z-index的值不是auto时,此value()将创建新的堆栈上下文.它在影响table-*-group,table-row,table-column,table-cell,和table-caption元素是不确定的.

相关问题:

1. 叠加在tbody上面
2. 相对于表格单元格的定位

Answer 1

MDN 所说的在 CSS2 中是准确的。多年来，position: relative对内部表格框的影响是未定义的（第9.3.1 节），并且实现远不能互操作。

这只是最近在 css-position-3 中发生了变化，它现在定义了如下效果：

position: relative对表格元素的影响定义如下：

• table-row-group、table-header-group、table-footer-group 和 table-row 相对于其在表格中的正常位置的偏移量。如果表格单元格跨越多行，则仅偏移位于相对定位行中的单元格。

• table-column-group, table-column 不会偏移相应的列，并且在position: relative应用时没有视觉影响。

• table-caption 和 table-cell 相对于其在表格中的正常位置的偏移量。如果表格单元格跨越多个列或行，则整个跨越的单元格会发生偏移。

然而，实现仍然无处不在，其原因是因为 CSS 表模型的实现仍然是混乱的、不可预测的、不完全可互操作的并且充满历史包袱，没有人愿意用一根 10 英尺长的杆子去触及这些包袱。您可以通过浏览css-tables-3 规范和CSSWG 的该规范的 GitHub 问题来判断。

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

顺便说一句：position: relative当您设置tbody为display: block.

是的，因为这样做会tbody停止像 a 一样运行tbody并开始像 a 一样运行div，并且您完全破坏了表格的 CSS 结构。