在 table 中适当缩放覆盖 div

Question

关于 html tables.

中子元素的缩放，我有一个我不明白的问题

从头开始，我的目标是拥有一个 table 并使用 z-index 用 div 覆盖 table 主体。使用正确的颜色，这看起来 table 处于非活动状态并且无法单击。

您可以在下面找到一个最小的示例，说明由于某些其他要求而导致的情况。如您所见，叠加层 div 始终缩放到完整 table 而不仅仅是其中的一部分。无论它是 tbody 的子代还是一个单元格的子代（就像现在示例代码中那样——我想也许 div 不允许作为 tbody 的直接子代，但我可以放置一个叠加层 div 在每个 table 单元格中。

table {
  border: 1;
  border-color: blue;
}

#content {
  position: relative;
}

#content * {
  position: inherit;
}

#overlay {
  top: 0;
  left: 0;
  /*bottom: 0;
  right: 0;*/
  position: absolute !important;
  background: rgba(0, 0, 0, .4);
  z-index: 3;
  width: 100%;
  height: 100%
}

<div id="content">
  <div>
    Some stuff before
  </div>
  <br>
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div>
            Cell
          </div>
          <div id="overlay"></div>
        </td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
      </tr>
    </tfoot>
  </table>
  <br>
  <div>
    Some stuff after
  </div>
</div>

我不明白为什么会发生这种情况，这让我很难想到解决办法，我希望有人能帮助我并提供解释。

干杯

Answer 1

您的 table 单元格也需要设置为 position: relative。而不是 #content * 直接使用 td 或至少 #content td.

设置它们

td {
  position: relative;
}

#overlay {
  top: 0;
  left: 0;
  position: absolute;
  background: rgba(0, 0, 0, .4);
  z-index: 3;
  width: 100%;
  height: 100%
}

<div id="content">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div>
            Cell
          </div>
          <div id="overlay"></div>
        </td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Footer 1</td>
        <td>Footer 2</td>
      </tr>
    </tfoot>
  </table>
</div>

那么为什么这样做有效？

简短回答： position 不是 inheritable 并且 Chrome 与 table 标签有一些问题。

但这只是事实的一半。所有主要浏览器（使用 Chrome、Firefox 和 IE11 进行测试）都允许大多数（甚至可能是所有）属性从其父级继承。当您在 Firefox 或 IE11 中测试您的代码片段时，您会发现它确实有效。那为什么不在 Chrome 呢？

事实证明 Chrome 在 table-* 显示模式和 table 标签本身方面存在一些问题。它在继承时始终使用默认的 position 值（即 static）。即使最近的父级设置了 position: relative，它也不会像下一个代码片段所示那样工作。

因此得出结论：最好始终显式设置 position: relative，并且在大多数情况下避免同时使用 inherit。

main {
  position: relative;
  border: 2px solid #000;
  width: 200px;
  margin-bottom: 20px;
}

table, .fake-table {
  min-height: 50px;
  margin: 10px;
}

table, tr, td, .fake-table div {
  position: inherit;
}

.relative {
  position: relative;
}

em {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 100px;
  height: 100%;
  background: rgba(166, 199, 252, .9);
  text-shadow: 0 0 10px #fff;
}

.fake-table .table {
  display: block;
}

.fake-table .row {
  display: flex;
  justify-content: flex-start;
}

.fake-table .cell {
  display: inline-block;
  min-width: 40px;
}

<main>
  <table>
    <tr>
      <td>...</td>
      <td>
        cell
        <em>Starting point (inherited table)</em>
      </td>
    </tr>
  </table>
</main>

<main>
  <table>
    <tr class="relative">
      <td>...</td>
      <td>
        cell
        <em>Parent is set to relative</em>
      </td>
    </tr>
  </table>
</main>

<main class="fake-table">
  <table class="table">
    <tr class="row">
      <td class="cell">...</td>
      <td class="cell">
        cell
        <em>Table tags in different display mode</em>
      </td>
    </tr>
  </table>
</main>

<main class="fake-table">
  <div class="table">
    <div class="row">
      <div class="cell">...</div>
      <div class="cell">
        cell
        <em>Table using flex (behaves correctly)</em>
      </div>
    </div>
  </div>
</main>

<main>
  <table>
    <tr>
      <td>...</td>
      <td class="relative">
        cell
        <em>Expected rendering</em>
      </td>
    </tr>
  </table>
</main>

在 table 中适当缩放覆盖 div

Proper scaling of overlaying div in table

html

css

z-index

那么为什么这样做有效？