z-index 在表内不起作用

Question

为什么 z-index 在表格内不起作用？ 我有一个有 4 列的表格，其中一列位于表格之外，因此它看起来像选项卡，但我不能隐藏表格下方选项卡的右侧。

请看这段代码sn-p：

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，我想去掉标签右侧的这个阴影。

Answer 1

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

为了使它起作用，您可以将具有relative 或absolute 位置的两个元素放在同一个DOM 级别。

关于 z-index 的文档： https://stackoverflow.com/a/2305711/6028607

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>

Answer 2

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

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

小提琴：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>

你的小提琴：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/