逆转的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以显示：块。

意图是，这些是可扩展的内容块，将重叠页面上的其他任何内容。

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

但是，由于每个元素都是在前一个元素之后渲染的，所以实际的堆叠顺序是相反的（最后创建的内容元素覆盖之前创建的一个元素）。

有没有一种巧妙的方式来颠倒CSS/HTML的这种行为？或者是让页面呈现的解决方案，然后通过javascript，按顺序抓住所有的内容divs，并按相反的顺序给每个z-index？

UPDATE：

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

<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（红色）将位于前一个（橙色）之上。

我找不出需要应用什么类型的z索引才能让FIRST彩色重叠div处于顶部。 Z-index从上到下的顺序应该反映标记（顶部为黄色，底部为红色）。

这当然与标准相反。

我愿意使用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索引，这将非常有用。如果动态插入<div class="wrapper">元素（或者其他原因，不能提前设置特定样式）。如果您以相反的顺序插入<div>，示例中的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}; 
    } 
} 

Answer 4

我有完全相同这一问题，但元素的数目不确定，可能太多，使CSS黑客可以通过jamie-wilson发布。另外，由于我的页面是使用PHP动态生成的，因此我不想大肆渲染DOM中所有内容的顺序，并按照Sandy Gifford的建议使用flexbox。我发现了一个非常简单而优雅的jQuery的解决方案，而不是使用方法：

$(document).ready(function() { 

    var item_count = $('your-selector').length; 

    for(i = 0, i < item_count, i++) 
    { 
    $('your selector').eq(i).css('z-index', item_count - i); 
    } 

}); 

我不能怎么高性能，这是，但说话〜35个项目我没有看到任何的延迟。