z-index 在 table 中不起作用

z-index is not working inside table

为什么 z-index 在 table 中不起作用？ 我有一个 table 有 4 列，其中一列位于 table 之外，因此它看起来像选项卡，但我无法隐藏 table.[=16= 下选项卡的右侧]

请看这段代码：

div {
  position: relative;
  z-index: 5;
  width: 70%;
  margin: auto;
  height: 500px;
  background-color: red;
}

table {
  border: none;
  border-spacing: 0 11px;
  width: 100%;
  table-layout: fixed;
}

td.tab {
  background-color: white;
  padding: 15px;
  width: 20%;
  position: absolute;
  z-index: -15;
  right: 90%;
}

td.plan {
  padding: 15px;
  width: 33.3%;
  text-align: center;
}

<div class="bottom">
  <table>
    <tbody>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
    </tbody>
  </table>
</div>

fiddle code

编辑：我不需要标签，我会将我们的计划添加到站点。 我更新 fiddle，我想删除选项卡右侧的阴影。

在您的示例中，z-index 将不起作用，因为您将它与 DOM 中不在同一级别的两个元素一起使用。

要使其正常工作，您可以将具有 relative 或 absolute 位置的两个元素放在同一 DOM 级别。

关于 z-index 的文档： 

div {
  position: relative;
  z-index: 5;
  width: 70%;
  margin: auto;
  height: 500px;
  background-color: red;
}

table {
  border: none;
  border-spacing: 0 11px;
  width: 100%;
  table-layout: fixed;
}

td.tab {
  background-color: white;
  padding: 15px;
  width: 20%;
  position: absolute;
  z-index: -15;
  right: 90%;
}

td.plan {
  padding: 15px;
  width: 33.3%;
  text-align: center;
  z-index: 0;
  position: relative;
}

.test { z-index: 0; position: absolute; top: 200px; background:yellow; width: 100%; left: 0; height: 40px; padding: 10px;  }

<div class="bottom">
  <table>
    <tbody>
      <tr>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="test">test</div>

您的 td 选项卡绝对定位但 relative 到 div.bottom。

最简单的方法是删除父级上的 z-index。

Fiddle: https://jsfiddle.net/abhitalks/bxzomqct/7/

片段：

div {
  position: relative;
  width: 70%;
  margin: auto;
  height: 500px;
  background-color: red;
}

table {
  border: none;
  border-spacing: 0 11px;
  width: 100%;
  table-layout: fixed;
}

td.tab {
  background-color: #eee;
  padding: 15px;
  width: 20%;
  position: absolute;
  z-index: -15;
  right: 90%;
}

td.plan {
  padding: 15px;
  width: 33.3%;
  text-align: center;
}

<div class="bottom">
  <table>
    <tbody>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
    </tbody>
  </table>
</div>

更好的是，为了避免混淆，只需将您的整个构造包裹在另一个 div 中，然后将标签 relative 定位在外部 div.

div.top {
  position: relative;
  width: 70%;
  margin: auto;
}
div.bottom {
  background-color: red; z-index: 50; height: 500px;
}

table {
  border: none;
  border-spacing: 0 11px;
  width: 100%;
  table-layout: fixed;
}

td.tab {
  background-color: #eee;
  padding: 15px;
  width: 20%;
  position: absolute;
  z-index: -150;
  right: 90%;
}

td.plan {
  padding: 15px;
  width: 33.3%;
  text-align: center;
}

<div class="top">
<div class="bottom">
  <table>
    <tbody>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
      <tr>
        <td class="tab">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
        <td class="plan">test</td>
      </tr>
    </tbody>
  </table>
</div>

</div>

你的Fiddle：https://jsfiddle.net/abhitalks/bxzomqct/6/

为什么会这样:

这是因为定位元素生成的堆栈上下文。虽然，堆叠上下文中的堆叠顺序指定要首先绘制的负 z-index 值，但是它仅限于相同的堆叠上下文。

参考：https://www.w3.org/TR/CSS2/zindex.html

阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

因此，如果 z-index 为负，您的选项卡应该出现在其父项的后面（在本例中为 div.bottom）。它会，因为它在相同的堆叠上下文中。

但是，一旦您为 div.bottom 指定了 z-index 值，它就会创建一个新的堆叠上下文，将其所有子元素限制在堆叠顺序中的特定位置。这会导致它不会出现在选项卡的前面，而不管选项卡的 z-index。

请注意，规范并未逐字解释，必须与其他参考资料和文档一起参考才能加深理解。这很棘手。

这里有一篇不错的文章可以参考：https://philipwalton.com/articles/what-no-one-told-you-about-z-index/