当父项被修复并具有相同的z-index时，子元素z-index不起作用？

I used jsfiddle to recreate my issue. I would like .top .inside to be above .bottom .inside. I know that z-index only works with its respective position type i.e. 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? Even if I have to use jQuery/javascript?

我用jsfiddle重新创建了我的问题。我想.top。里面是.bottom .inside。我知道z-index只适用于它各自的位置类型，即fixed和absolute不占用相同的z-index状态，但如果我有两个具有相同z-index的固定父类，是否有办法让孩子绝对定位不同的z索引取决于我想要的顶部？即使我必须使用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;
}

2 个解决方案

#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类获取z-index，即111。

To see top above, you need the to add a z-index higher than 111:

要查看上面的顶部，您需要添加高于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. 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.

定位元素创建自己的堆叠上下文，其中该上下文中的所有内容都相对于基节点进行z索引。因此，因为两个父元素都已定位，所以它们会创建堆叠上下文。因此，它们内部事物的zindexes不会在上下文中相对，而是作为整个上下文由最顶层节点委托。

My favorite article on the subject

我最喜欢这个主题的文章

#2

Add a z-index to bottom. Works like you want it to.

在底部添加z-index。像你想要的那样工作。

.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>

#1