z-index - 根据页面呈现顺序反转 z-index

Question

示例标记:

<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>
<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>
<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div> 

示例 CSS:

.wrapper {z-index: 1}
.wrapper div {display: none; position: absolute;}

通过 javascript (jQuery) 我将点击事件附加到每个 h2，然后将内容 div 切换为显示: block 。

目的是这些是可扩展的内容 block ，将与页面上的任何其他内容重叠。

问题是我希望第一个与第二个重叠，如果所有这些都打开，这将与第三个重叠。

然而，由于每一个都是在前一个之后渲染的，所以实际的堆叠顺序是相反的(最后一个内容 div 创建的 end sup 覆盖了之前创建的一次)。

有没有一种巧妙的方法可以用 CSS/HTML 来扭转这种行为？或者是让页面呈现的解决方案，然后通过javascript，按顺序获取所有内容div并以相反的顺序给它们每个z-index？

更新:

这里有一些更具体的标记:

<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: yellow;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>
<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: orange;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>
<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: red;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>

以下标记将生成 3 个 div，每个 div 都有一个重叠的彩色 div。由于渲染顺序，最后一个绝对定位的 DIV(红色)将位于它之前的 DIV(橙色)之上。

我无法弄清楚我需要应用什么类型的 z-index 才能使第一个彩色重叠 div 位于顶部。就 z-index 而言，从上到下的顺序应反射(reflect)标记(顶部为黄色，底部为红色)。

当然，这与标准相反。

我愿意使用 javascript 来修复这个后期显示，但我仍然在努力寻找我需要通过 javascript 应用的确切 CSS。我所追求的可行吗？

Answer 1

这是最佳答案的 SASS 函数:

@for $i from 1 through 10 {
   &:nth-child(#{$i}) {
     z-index: #{10 - $i};
   }
}