Как сделать, чтобы z-индекс блоков ниже был меньше, чем у блока выше

Question

Описание задачи

Есть номер блока, который содержит абсолютно позиционированные элементы.Эти абсолютно позиционированные элементы должны перекрывать абсолютно позиционированные элементы, содержащиеся в следующих блоках.

Решение вручную назначать z-индексы блокам не подходит, поскольку число блоков является динамическим.

Есть ли другие решения?

Прикрепленный фрагмент кода, чтобы задача была более понятной.Пожалуйста, спросите, если вам нужно больше разъяснений по заданию.

.wrapper {
  position: relative;
  width; 100%;
}

.inner {
  position: absolute;
  background: yellow;
  top: 0;
  right: 50px;
  height: 30px;
 }
 
 .inner.green {
   background: green;
 }

<div class="wrapper">
  Some content 1
  <div class="inner">Should be above</div>
</div>
<div class="wrapper">
  Some content 2
  <div class="inner green">Should be below</div>
</div>

Answer 1

Вы можете использовать flex, чтобы изменить порядок элементов, чтобы они естественным образом складывались, но это потребовало бы вывода html в обратном порядке:

.reverser {
  display:flex;
  flex-direction: column-reverse;
}
.wrapper {
  position: relative;
  width:100%;
}

.inner {
  position: absolute;
  background: yellow;
  top: 0;
  right: 50px;
  height: 30px;
}

.inner.green {
  background: green;
}

<div class="reverser">
  <div class="wrapper">
    Some content 2
    <div class="inner green">Should be below</div>
  </div>
  <div class="wrapper">
    Some content 1
    <div class="inner">Should be above</div>
  </div>
</div>

Answer 2

Вам понадобится счетчик, который будет равен количеству блоков, которые вы будете рендерить, например:

5 boxes - var counter = boxes.length

А затем, пока вы выполняете итерацию и визуализируете поля, добавьте:

style="z-index:[counter];" to the box 
and counter--

У вас должно быть что-то вроде:

box1 - z-index: 5
box2 - z-index: 4
etc...