与不同父母的Z索引

Question

我在使用z-index时遇到了一些麻烦。这是我的简化布局：

<div id="overlapper"></div>
<div id="container">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

我需要overlapper出现在前面child1但后面child2。我尝试弄乱z索引，但是由于堆栈上下文，它没有用。

有什么帮助吗？谢谢

Answer 1

首先，确保overlapper，child1和child2属于同一堆叠内容。

也就是说，确保container不创建堆栈上下文：

• container 不能是根元素。
• container必须为默认值position，z-index，opacity和isolation属性：
  • position: static 要么 z-index: auto
  • opacity: 1
  • isolation: auto

现在，做overlapper，child1和child2定位的元素，并添加z-index你想要的。

#overlapper, #child1, #child2 {
  position: relative;
  padding: 30px;
  height: 20px;
}
#overlapper {
  z-index: 3;
  background: red;
  top: 60px;
  margin-left: 20px;
}
#container {
  margin-top: -40px;
}
#child1 {
  z-index: 2;
  background: green;
  top: -40px;
}
#child2 {
  z-index: 4;
  background: blue;
  margin-left: 40px;
}

<div id="overlapper">Overlapper</div>
<div id="container">
    <div id="child1">Child 1</div>
    <div id="child2">Child 2</div>
</div>