z-index 在表内不起作用 [英] z-index is not working inside table

查看：41
本文介绍了z-index 在表内不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

请查看此代码片段:

div {位置:相对；z-索引:5；宽度:70%；保证金:自动；高度:500px；背景颜色:红色；}桌子 {边界:无；边框间距:0 11px；宽度:100%；表格布局:固定；}td.tab {背景颜色:白色；填充:15px；宽度:20%；位置:绝对；z-索引:-15；正确:90%；}td.计划{填充:15px；宽度:33.3%；文本对齐:居中；}

<表格><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>

解决方案

你的 td 标签是绝对定位的，但是 relative 到 div.bottom>.

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

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

片段:

div {位置:相对；宽度:70%；保证金:自动；高度:500px；背景颜色:红色；}桌子 {边界:无；边框间距:0 11px；宽度:100%；表格布局:固定；}td.tab {背景色:#eee;填充:15px；宽度:20%；位置:绝对；z-索引:-15；正确:90%；}td.计划{填充:15px；宽度:33.3%；文本对齐:居中；}

<表格><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>

<小时>

更好的是，为了避免混淆，只需将整个结构包装在另一个 div 中，并将标签 relative 定位在外部 div 中.>

div.top {位置:相对；宽度:70%；保证金:自动；}div.bottom {背景颜色:红色；z-索引:50；高度:500px；}桌子 {边界:无；边框间距:0 11px；宽度:100%；表格布局:固定；}td.tab {背景色:#eee;填充:15px；宽度:20%；位置:绝对；z-索引:-150；正确:90%；}td.计划{填充:15px；宽度:33.3%；文本对齐:居中；}

<div class="bottom"><表格><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>

你的小提琴: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 索引如何.

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

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

Why z-index is not working inside table? I have a table with 4 column that one column is positioned outside of table, so that it seem as tabs, but I cannot hidden right side of tabs under table.

Please see this code snippet:

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

EDIT: I no want tabs, I will add our plans to site. I update fiddle, I want remove this shadow on right side of tabs.

解决方案

Your td tabs are positioned absolutely but relative to the div.bottom.

Easiest is to remove the z-index on the parent.

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

Snippet:

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>

Better still, to avoid confusions, Just wrap your entire construct in another div and position the tabs relative that outer 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>

Your Fiddle: https://jsfiddle.net/abhitalks/bxzomqct/6/

Why this happens:

This is because of the stacking context that is generated by the positioned elements. Although, the stacking order within a stacking context specifies the negative z-index values to be painted first, it is however limited to that same stacking context.

Reference: https://www.w3.org/TR/CSS2/zindex.html

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

So, with a negative z-index, your tabs should appear behind its parents (div.bottom in this case). And it will, as it is in same stacking context.

However, as soon as you give a z-index value to the div.bottom, it creates a new stacking context which confines all of its child elements to a particular place in the stacking order. This causes it not to appear in front of the tabs irrespective of the z-index of tabs.

Note that the specs do not explain this verbatim, and has to be referred to with other references and docs to develop an understanding. It's tricky.

Here is a good article you can refer to: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

这篇关于z-index 在表内不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆