Javascript 当父元素固定且具有相同的z索引时，子元素z索引不起作用？

我过去常常重现我的问题。我想要。上面。里面在上面。下面。里面。我知道z-index仅适用于其各自的位置类型，即固定和绝对不占用相同的z-index状态，但如果我有两个固定的父级都具有相同的z-index，是否有办法让子级使用不同的z-index进行绝对定位，这取决于我希望在顶部放置哪个？即使我必须使用jQuery/javascript

html:

---

现在两个元素都是兄弟元素，因此它们处于相同的堆栈上下文中。但是，它们也都是从

.fixed

类中获取z索引，即

111

要查看上面的

top

，您需要添加一个高于111的z指数：

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

编辑：

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

---

在底部添加一个

z索引。就像你想要的那样工作


。已修复{
保证金：自动；
位置：固定；
宽度：100%；
z指数：111；
}
.顶{
背景：#222；
高度：150像素；
排名：0；
}
.底部{
背景:#555；
高度：58px；
顶部：100px；
z指数：1；
}
.里面{
背景：#770000；
保证金：自动；
填充：20px；
位置：绝对位置；
右：0；
左：0；
宽度：200px；
}
.上面.里面{
背景：#770000；
顶部：70像素；
z指数：999；
}
.底部.内部{
背景#007700；
z指数：1；
}

我在一个固定的元素里面
我在一个固定的元素里面
那么，如果双亲拥有相同的z索引，我就无法改变他们的内部内容了？也没有javascript/jQuery方法可以做到这一点？如果父项具有相同的z索引，则无法使选定的子项与另一个的子项重叠，而不使整个父项与另一个重叠。这篇文章很好地阐述了优先规则。如果两个兄弟姐妹有相同的z-索引，那么它就在上面显示的页面的下方。好文章。谢谢你。重点是让父母都是相同的z指数，但我想我可以降低底部的z指数，然后用我正在努力完成的东西来解决问题。谢谢你的回答。
.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;
}

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