Question

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

position: relative，tbody甚至tr上的

td被忽略。然后将带有position: relative的第一个父级用作绝对放置的“锚”。

顺便说一句：将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 关于“堆叠环境”，但这不是这个问题的主题

当z-index的值不是auto时，此值（position: relative）创建新的堆叠上下文。它对table-*-group，table-row，table-column，table-cell和table-caption元素的影响是不确定的。

相关问题：

Answer 1

MDN所说的从CSS2开始是准确的。多年来，position: relative对内部表框的影响是不确定的（§9.3.1），实现远非可互操作。

这仅在最近的css-position-3（现在为defines the effects as follows）中发生了变化：

position: relative对表元素的作用定义如下：



table-row-group，table-header-group，table-footer-group和table-row相对于其在表中的正常位置的偏移量。如果表格单元格跨越多行，则只有源自相对位置行的单元格才会偏移。



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



表格标题和表格单元相对于表格中其正常位置的偏移量。如果一个表格单元格跨越多列或多行，则整个单元格都将偏移。

但是实现仍然无处不在，其原因是因为CSS表模型的实现仍然混乱，不可预测，无法完全互操作并且充满了历史重物，没人愿意碰10英尺高的杆。您可以通过浏览css-tables-3 spec和the CSSWG's GitHub issues for that spec来了解情况。

已经说过，浏览器供应商正在缓慢而谨慎地解决切线问题，例如像这样的内部表框的位置。只是不要期望快速的进步。

顺便说一句：当您将position: relative设置为tbody时，display: block确实可以工作。

是的，因为这样做tbody会像tbody一样停止工作，而开始像div那样工作，从而完全破坏了表的CSS结构。

是大多数浏览器的错误吗？：忽略相对于“ tbody”，“ tr”和“ td”的位置？

来源：

相关问题：

1 个答案: