父母的z-index如何影响孩子的z-index？

Question

​

#parent {
  position: relative;
  background: red;
  width: 100px;
  height: 100px;
  z-index: 1;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: -1;
  transform: translateX(20px);
}

<div id="parent">
  <p>
   qqq
  </p>
  <div id="child" >
    test
  </div>
</div>

​

如果我没有将父节点的z-index设置为1，那么子节点的z-index会让它位于父节点之下。但是，当我将父进程的z-index设置为1(或任何大于0的数字)时，子进程的z-index将不起作用！

为什么会发生这种情况？

Answer 1

默认情况下，所有背景颜色都在文本后面。z-index的默认值是auto，它会声明“将堆栈顺序设置为等于它的父级”。但是，在子对象上使用z-index会将其移出自然的堆栈顺序，并将其放在后台。如果您将父对象更改为也具有Z-Index，则它将重新加入堆栈，并且背景颜色将再次出现在文本后面。

父项和子项都设置为自动。两者都在同一个堆栈中。

​

#parent {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
  transform: translateX(20px);
}

<div id="parent">
  <div>
   qqq
  </div>
  <div id="child" >
    test
  </div>
</div>

​

设置为z-index -1的子级现在不在与父级相同的堆栈中

​

#parent {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: -1;
  transform: translateX(20px);
}

<div id="parent">
  <div>
   qqq
  </div>
  <div id="child" >
    test
  </div>
</div>

​

子元素设置为z-index -1，父元素设置为z-index 1，这两个元素放在同一个堆栈中，这样背景颜色就会放在两个元素后面。

​

#parent {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
  z-index: 1;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: -1;
  transform: translateX(20px);
}

<div id="parent">
  <div>
   qqq
  </div>
  <div id="child" >
    test
  </div>
</div>

​

Answer 2

当然，如果您将z-index: -1;设置为子级，则子级将位于父级之后。如果从子进程中删除z-index: -1;，也可以从父进程中删除z-index: 1;。

​

#parent {
  position: relative;
  background: red;
  width: 100px;
  height: 100px;
  /*z-index: 1;*/
}

#child {
  background: green;
  position: absolute;
  top: 50px;
  left: 50px;
  /*z-index: -1;*/
  transform: translateX(20px);
}

<div id="parent">
  <p>
   qqq
  </p>
  <div id="child" >
    test
  </div>
</div>

​