CSS 使用 z-index 使 child 成为最顶层

Question

https://codepen.io/anon/pen/QZVVbY

我希望绿框上方的代码位于最顶层。

但显然，它在另一个小的 z-index 容器下。

我不想更改父 z-index。如何实现？

Not to change the z-index of parent and other parent

.container{
  width: 500px;
  height: 50px;
}

.container1 {
  background: red;
  width: 500px;
  height: 50px;
  position: relative;
  z-index: 2;
}
.container2 {
  background: blue;
  width: 50px;
  height: 50px;
  position: relative;
}
.container3 {
  background: green;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 20px;
  z-index: 2200000;
}
.container4 {
  background: yellow;
  width: 500px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 5;
}
.container5 {
  background: gray;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 15px;
  left: 40px;
}

<div class="container1">
  <div class="container2"></div>
  <div class="container3"></div>
</div>

<div class="container4">
  <div class="container5"></div>
</div>

Answer 1

问题是在 container1 上设置 z-index 会创建层堆栈。这导致所有具有 z-index 的子元素都相对于父 z-index。为了使这项工作从 container 中删除 z-index 样式将获得您想要的效果。

.container{
  width: 500px;
  height: 50px;
}

.container1 {
  background: red;
  width: 500px;
  height: 50px;
  position: relative;
}
.container2 {
  background: blue;
  width: 50px;
  height: 50px;
  position: relative;
}
.container3 {
  background: green;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 20px;
  z-index: 999999;
}
.container4 {
  background: yellow;
  width: 500px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 5;
}
.container5 {
  background: gray;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 15px;
  left: 40px;
}

 
<div with z-index=1 class="container1" >
    <div class="container2"></div>
    <div with z-index=100 class="container3" ></div>
</div>

<div with z-index=2 class="container4" >
  <div class="container5"></div>
</div>