Как установить блок поверх других?

Question

[KASich]

Требуется, чтобы блок .second был поверх блока .third. При этом блок .third был поверх блока .first. Менять блоки местами нельзя. Есть ли решение?

<div class="first">
  <div class="second"></div>
</div>
<div class="third">
</div>

div{
  width:50px;
  height:50px;
  position:absolute;
}
.first{
  top:0;
  background:#08ff23;
  z-index:1;
}
.second{
  top:20px;
  background:#ce1248;
  z-index:100;
}
.third{
  top:40px;
  background:#2235ac;
  z-index:2;
}

Answer 1

[inzeppelin]

Если выпилить абсолютное позиционирование, то можно так:

Answer 2

[lamer350]

нет

Answer 3

[fallus]

Тут как бы ::after участвует. Но он наследуется от первого. Так что всё честно!