Как сделать перекрытие абсолютно позиционированных элементов?

Question

[r_g_b_a]

https://jsfiddle.net/Le6c9mjt/2/
В данном примере каждый элемент .child перекрывает своего родителя. Мне необходимо добиться обратного результата. На верхнем слое должен находится красный квадрат, под ним зеленый, ниже синий и т.д. Основная сложность в том, что количество элементов не известно.

Answer 1

[Вадим]

Никак.
Это так не работает.
Дочерний элемент не может быть под родительским.

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

А вот если расположить их как соседей в рамках одного родителя и в обратном порядке, то будет то, чего Вы хотите, независимо от количества элементов. Останется только решить вопрос с "динамическим" позиционированием. Это можно сделать при выводе самих элементов, либо при генерации на бэкенде, либо через js.