Создание наложения поверх родительского элемента div, но под дочерним элементом элемента div

Question

Я хочу вывод, подобный этому:

Фактическая структура:

<div class="container">   <!-- green -->
  <div class="overlay">   <!-- purple -->
  </div>

  <div class="parent">    <!-- red -->
      <div class="child"> <!-- lightblue -->
          Child
      </div>
  </div>
</div>

Я достиг этого послеполчаса борьбы с помощью этого CSS:

.container {
  position: relative;
  width: 500px;
  height: 500px;
  background: green;
  z-index: 1;
}

.overlay{
  background: purple;
  position: absolute;
  width: 150px;
  height: 150px;
  z-index: 2;
}

.parent {
    position: relative;
    background: red;
    width: 250px;
    height: 250px;
}

.child {
    z-index: 100;
    background: lightblue;
    width: 50px;
    height: 50px;
    position: relative;
}

( Fiddle demo )

Что я не понимаю, так это: почему не разрешено устанавливать .parent значение z-index ни к чему?Потому что это немедленно нарушает этот порядок.Если я установлю .parent{z-index: a;}, где a - это целое число <= 1, тогда пурпурный оверлей окажется над дочерним элементом, но если <code>a>=2, то .child и .parent оба придут .overlay.

Но почему это вообще что-то ломает?Я бы, по крайней мере, ожидал, что z-index: 0; ничего не сломает, так как это вещь на уровне земли.Что мне не хватает?

Кроме того, если я работаю над веб-страницей, где z-index из .parent не может быть изменено из заданного целочисленного значения, из-за других ограничений страницы, есть ли какие-либо другиеспособ вставить .overlay между .parent и .child?(позиционирование и z-индекс .overlay в моих руках)