根据页面呈现顺序反转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)我将一个click事件附加到每个h2,然后将内容div切换为display:block.

目的是这些是可扩展的内容块,将与页面上的任何其他内容重叠.

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

但是,由于每一个都在前一个渲染之后渲染,因此实际的堆叠顺序是相反的(最后一个内容div创建的结尾覆盖了先前创建的一次).

有没有一种聪明的方法来逆转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(红色)将位于它之前的一个(橙色).

我无法弄清楚我需要应用什么类型的z索引才能使FIRST彩色重叠div位于顶部.从z到索引的顶部到底部的顺序应该反映标记(顶部为黄色,底部为红色).

当然,这与标准相反.

我愿意使用javascript来修复这个后期显示,但我仍然在努力寻找我需要通过javascript应用的确切CSS.我可以做的是什么？

Answer 1

所以在这里仍然没有答案,我只是做了类似的事情,即使我的解决方法是100%黑客,如果有其他人来到这个页面,它确实有效!

#nav ul li:nth-child(1) {
        z-index:10; 
    }
    #nav ul li:nth-child(2) {   
        z-index:9;  
    }
    #nav ul li:nth-child(3) {
        z-index:8;  
    }
    #nav ul li:nth-child(4) {   
        z-index:7;  
    }
    #nav ul li:nth-child(5) {
        z-index:6;  
    }
    #nav ul li:nth-child(6) {   
        z-index:5;  
    }

我刚刚拥有它,只要我没有超过10个元素它似乎工作...

Answer 2

闪亮的新CSS flexbox技术使这更容易,但缺点是实际内容将被颠倒.这不一定是个大问题,只是在语义上很奇怪.

简而言之:使用以下样式将所有内容包装在容器中:

display: flex;
flex-direction: column-reverse;

有关工作示例,请参阅小提琴(将鼠标悬停在wrapper元素上以查看操作).

如果您不希望每次更新内容时都依赖javascript动态检查z-index,这将非常有用.如果<div class="wrapper">元素是动态插入的(或任何其他原因无法预先设置特定样式)如果<div>以相反的顺序插入s,示例中的CSS规则应足以处理z索引.

这是您当前的设置:http: //jsfiddle.net/dJc8N/2/

这是相同的HTML,添加了CSS(注意<h2>标签中的数字):http: //jsfiddle.net/Mjp7S/1/

编辑:

我发布的CSS可能尚未准备好进行复制粘贴.然而,这是:

display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column-reverse;
-moz-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
-o-flex-direction: column-reverse;
flex-direction: column-reverse;

Answer 3

这是SASS功能的最佳答案:

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