如何使下面的块的 z-index 小于上面的块之一

Question

任务描述

有多个包含绝对定位元素的块。这些绝对定位元素应该与下面块中包含的绝对定位元素重叠。

手动为块提供 z-index 的解决方案并不好，因为块的数量是动态的。

还有其他解决方案吗？

附加的代码片段使任务更加清晰。请询问您是否需要对该任务进行更多说明。

.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

您将需要一个等于您将渲染的块数的计数器，例如：

5 boxes - var counter = boxes.length

然后在迭代和渲染框时添加：

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

你应该有这样的东西：

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

Answer 2

您可以使用 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>

如何使下面的块的 z-index 小于上面的块之一

How to make z-index of the blocks below to be less than the one of the block above

html

css

z-index