当父母固定且具有相同的z-index时，子元素的z-index不起作用？

Question

I used jsfiddle to recreate my issue. 我使用jsfiddle重新创建了我的问题。 I would like .top .inside to be above .bottom .inside. 我想.top .inside在.bottom .inside之上。 I know that z-index only works with its respective position type ie fixed and absolute don't occupy the same z-index state, but If I have both fixed parents with the same z-index, is there a way to have the children positioned absolute with differing z-indexes depending on which I want on top? 我知道z-index仅适用于其各自的位置类型，即固定和绝对不占据相同的z-index状态，但是如果我的两个固定父级都具有相同的z-index，是否有办法让孩子定位绝对值不同的z索引，具体取决于我要放在顶部的哪个？ Even if I have to use jQuery/javascript? 即使我必须使用jQuery / javascript？

html: HTML：

<body>
    <div class="fixed top">
        <div class="inside">I am inside a fixed element</div>
    </div>
    <div class="fixed bottom">
        <div class="inside">I am inside a fixed element</div>
  </div>
</body>

css: CSS：

.fixed {
  margin: auto;
  position: fixed;
  width: 100%;
  z-index: 111;
}
.top {
  background: #222;
  height: 150px;
  top: 0;
}
.bottom {
  background: #555;
  height: 58px;
  top: 100px;
}
.inside {
  background: #770000;
  margin: auto;
  padding: 20px;
  position: absolute;
  right: 0;
  left: 0;
  width: 200px;
}
.top .inside {
  background: #770000;
  top: 70px;
  z-index: 999;
}
.bottom .inside {
  background: #007700;
  z-index: 1;
}

Answer 1

Right now both elements are siblings, so they are in the same stacking context. 现在，这两个元素都是同级元素，因此它们处于同一堆叠上下文中。 However, they also are both getting their z-index from the .fixed class, which is 111 . 但是，他们俩也都从.fixed类（即111获取z-index。

To see top above, you need the to add a z-index higher than 111: 看到top上方，你需要添加超过111的z-index更高：

.top {
  background: #222;
  height: 150px;
  top: 0;
  z-index: 112;
}

Edit: 编辑：

Positioned elements create their own stacking contexts, where everything within that context is z-indexed relative to the base node. 定位的元素会创建自己的堆栈上下文，其中上下文中的所有内容均相对于基本节点进行z索引。 So, because both parent elements are positioned, they create a stacking context. 因此，由于两个父元素均已定位，因此它们创建了堆栈上下文。 Therefore, the zindexes of the things inside them won't be relative across contexts, and will instead as a whole context be delegated to by the topmost node. 因此，它们内部事物的zindex不会在上下文之间是相对的，而是将整个上下文由最高节点委托给整个上下文。

My favorite article on the subject 我最喜欢的主题文章

Answer 2

Add a z-index to bottom. 在底部添加一个z-index 。 Works like you want it to. 像您想要的那样工作。

 .fixed { margin: auto; position: fixed; width: 100%; z-index: 111; } .top { background: #222; height: 150px; top: 0; } .bottom { background: #555; height: 58px; top: 100px; z-index:1; } .inside { background: #770000; margin: auto; padding: 20px; position: absolute; right: 0; left: 0; width: 200px; } .top .inside { background: #770000; top: 70px; z-index: 999; } .bottom .inside { background: #007700; z-index: 1; }

 <body> <div class="fixed top"> <div class="inside">I am inside a fixed element</div> </div> <div class="fixed bottom"> <div class="inside">I am inside a fixed element</div> </div> </body>

当父母固定且具有相同的z-index时，子元素的z-index不起作用？

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-12-17 20:37:35

解决方案2
2 2015-12-17 20:39:01

当父母固定且具有相同的z-index时，子元素的z-index不起作用？

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-12-17 20:37:35

解决方案2 2 2015-12-17 20:39:01

解决方案1
2 已采纳 2015-12-17 20:37:35

解决方案2
2 2015-12-17 20:39:01