z-index在表内不起作用

Question

为什么 z-index 在表内无效？ 我有一个包含4列的表，其中一列位于表格外部，因此它看起来像制表符，但我无法隐藏表格下方标签的右侧。

请参阅此代码段：

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

td个标签位于relative的{​​{1}}位置。

最简单的方法是删除父级div.bottom。

小提琴：https://jsfiddle.net/abhitalks/bxzomqct/7/

段：

＆＃13;

＆＃13;

z-index

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

更好的是，为了避免混淆，只需将整个构造包装在另一个<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。

＆＃13;

＆＃13;

div

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

你的小提琴：https://jsfiddle.net/abhitalks/bxzomqct/6/

为什么会发生这种情况：

这是因为定位元素生成的堆叠上下文。尽管堆叠上下文中的堆叠顺序指定了要首先绘制的负z-索引值，但是它限于相同的堆叠上下文。

参考：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 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>）。它会，因为它在相同的堆叠环境中。

但是，只要您为div.bottom提供z-index值，它就会创建一个新的堆叠上下文，将其所有子元素限制在堆叠顺序中的特定位置。这使得它不会出现在选项卡的前面，而与选项卡的z-index无关。

请注意，规范并未逐字解释，必须与其他参考文献和文​​档一起参考以形成理解。这很棘手。

以下是您可以参考的好文章：https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 2

在您的示例中，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>