CSS делает ребенка самым лучшим, используя z-index

Question

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

Я хочу, чтобы приведенный выше код зеленой рамки был самым верхним.

Но, очевидно, он находится под другим небольшим контейнером z-index.

Iне хочу менять родительский z-индекс.Как этого добиться?

Не изменять z-индекс родителя и другого родителя

.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

Проблема в том, что при наличии z-индекса на container1 создается стек слоев.В результате все дочерние элементы с z-индексом должны быть относительно родительского z-индекса.Чтобы добиться этой цели, удаление стиля z-index из container даст желаемый эффект.

.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>