是大多数浏览器的错误吗?:忽略相对于"tbody"，"tr"和"td"的位置? [英] Bug in most browsers?: Ignoring position relative on 'tbody', 'tr' and 'td'?

问题描述

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

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都将被忽略.然后将具有position: relative的第一个父级用作绝对放置的锚".

position: relative on tbody, tr and even td is ignored. And then first parent with position: relative is used as "anchor" for absolute placing.

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

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.

我的问题是:
为什么在tbody，tr td上忽略position: relative?
是否有任何这种行为的原因?
是应该修复的错误吗?

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>

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/zh-美国/docs/Web/CSS/position#relative 关于堆叠环境"，但这不是这个问题的主题

https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative About 'stacking context' but that is not the subject of this question

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

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. 覆盖在tbody之上
2. 相对于表格单元的位置

1. Overlay on top of tbody
2. Positioning relative to table-cell

推荐答案

MDN所说的从CSS2开始是准确的.多年以来，position: relative对内部表框的影响一直是不确定的( §9.3.1)，并且实现还远不能互操作.

What MDN says is accurate as of CSS2. For many years the effect of position: relative on internal table boxes was undefined (§9.3.1), and implementations were far from interoperable.

这只是最近在css-position-3中发生的变化，现在在将效果定义如下:

This changed only recently in css-position-3, which now defines the effects as follows:

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

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

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

• 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不会偏移相应的列，并且在应用position: relative时不会产生视觉影响.

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规范和该规范的CSSWG GitHub问题.

However implementations are still all over the place, and the reason for that is because implementations of the CSS table model remain chaotic, unpredictable, not completely interoperable and full of historical baggage that no one wants to touch with a 10-foot pole. You can tell by a skimming through the css-tables-3 spec and the CSSWG's GitHub issues for that spec.

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

Having said that, browser vendors are slowly and cautiously addressing tangential issues like positioning of internal table boxes like this bit by bit. Just don't expect rapid progress.

顺便说一句:position: relative在将tbody设置为display: block时确实起作用.

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

是的，因为这样做tbody停止像tbody那样起作用，并开始像div一样起作用，并且您完全破坏了表的CSS结构.

Yes, because by doing so the tbody stops functioning like a tbody and starts acting like a div, and you completely destroy the CSS structure of your table.

这篇关于是大多数浏览器的错误吗?:忽略相对于"tbody"，"tr"和"td"的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！