Question

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

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：

.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

现在两个元素都是兄弟元素，因此它们处于相同的堆叠上下文中。但是，他们也从.fixed类获得了z-index，即111。

要查看上面的top，您需要添加一个高于111的z-index：

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

编辑：

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

My favorite article on the subject

Answer 2

在底部添加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>

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

2 个答案: