Jquery 如何在堆叠div上反转z索引

我在一个页面上有多个以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>

如何更改堆叠顺序？使用jQuery向每个div添加z索引是最好的解决方案吗？我不知道该怎么做，JS不是我的强项。这对我来说也有点脆弱。有没有办法简单地颠倒堆叠顺序？下面是我非常简单的jQuery：

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

---

在.column div中使用z-index

看看这个

---

只需在工作代码中使用css…

以下是我的结论：

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

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

获取元素的长度/数量

从这个数字中扣除

乘以一个像10这样的数字，这样你就不会达到z指数1或0

---

您是否尝试使用

float:right

而不是

float:left

？是的，它似乎没有改变元素的索引顺序。我最终弄明白了如何使用jQuery的each方法，并从列数中减去div的索引来设置z索引。我只是还不能用我的答案更新。在你的列中使用z-index。在元素顶部使用更高的z-index就足够了。这里第一个是2，第二个是1，最后一个是0，或者用@SalilMomin在他的答案中提供的值。如果需要的话，他们的解释远不止这些。只需验证一下结果是什么，它们就像地狱一样有问题。问题是在某些情况下可能会有10个div，或者100个div。它不能硬编码到CSS中。您可以使用php或javascript动态管理它。。。这很简单，这就是问题所在，如何使用JS进行管理。我不使用PHP。

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

var rows = $(".somecontainer").children('div').get();
$.each(rows, function(index, ele) {
    $(ele).css({"z-index": (rows.length - i) * 10 });
});