如何在堆叠的div上反转z-index

Question

我在以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');
    });
});

Answer 1

这就是我最终得到的结果：

$('.column').each(function(i, c) {
        $(c).css('z-index', num - i);
    });

其中 num 实际上是页面上的列数，加上基于其他元素中最高 z-index 的任意数量。