相关疑难解决方法(0)

示例标记:

<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: …

我在以div包裹的页面上有多列是这样的：

<div class="first column" style="width:33%; float: left;"></div>
<div class="column" style="width:33%; float: left;"></div>
<div class="last column" style="width:33%; float: left;"></div>

我基本上使用的是一个插件，该插件可以对文本进行分栏并将其从左到右放置。在我的CSS中，我将它们重新放置，使它们彼此堆叠，然后使用一些jquery将每一列移开。问题是，它们以错误的顺序堆叠。最后一栏是第一栏，第一栏在底部。

这是CSS

#reader .column {
    position:absolute;
    top:0;
    left:0;
    background:#fff;
}

我该怎么做才能改变堆叠顺序？是使用jQuery向每个div添加z-index的最佳解决方案？我并不是完全做到这一点，JS不是我的强项。对我来说，这似乎还很脆弱。有没有一种方法可以简单地颠倒堆叠顺序？这是我非常简单的jQuery：

$(function(){
    $('#reader-inner').columnize();
    $('.column').click(function() {
      $(this).clearQueue().animate({left:'-550'},500, 'swing');
    });
});