Question

我正在尝试在 tbody （并且只有tbody）之上创建加载叠加层。我目前的解决方案是将tr添加为 tbody 的最后一个元素，并将其设置为 position：absolute ，并将tbody设置为 position：relative 。

table {
  width: 100%;
}

tbody {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(200, 200, 200, 0.7);
}

<table>
  <thead>
    <tr>Label</tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
    <tr><td>Data</td></tr>
    <tr class="overlay">
      <td>My overlay</td>
    </tr>
  </tbody>
</table>

预期的行为是叠加层覆盖 tbody ，但不包括 thead 。此叠加层也应该包含一些内容（例如刷新按钮），因此不能覆盖每个 td 。

我的解决方案在Firefox中完美运行，但不适用于webkit。 Webkit以某种方式忽略 tbody 标记上的位置：相对，因此叠加层覆盖整个表格等等。

分辨我已设法通过在 tbody

上添加 display：table 来实现此方法

Answer 1

使用CSS calc应该有助于此。 Support is fairly good也属于该物业。

您只需要将calc与top属性进行平衡。

所以你的CSS会变成：

table {
  width: 100%;
  position: relative;
}

.overlay {
  position: absolute;
  top: 25px;
  width: 100%;
  height: -webkit-calc(100% - 25px);
  height: calc(100% - 25px);
  background-color: rgba(200, 200, 200, 0.7);
}

这是一个有效的例子：

＆＃13;

table {
  width: 100%;
  position: relative;
}

.overlay {
  position: absolute;
  top: 25px;
  width: 100%;
  height: -webkit-calc(100% - 25px);
  height: calc(100% - 25px);
  background-color: rgba(200, 200, 200, 0.7);
}

＆＃13;

<table>
  <thead>
    <tr><td>Label</td></tr>
  </thead>
  <tbody>
    <tr><td>Data</td></tr>
    <tr><td>Data</td></tr>
    <tr class="overlay">
      <td>My overlay</td>
    </tr>
  </tbody>
</table>

＆＃13;

使用CSS Calc更新了答案。

Answer 2

恕我直言：在支持CSS3 position:relative表元素的浏览器中应该工作。如您所知，它仅在Firefox中有效。不在IE，Edge和Chrome中。

来源：

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元素的影响是不确定的。

叠加在tbody上面

3 个答案:

来源：

相关问题：