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来移动每一列。问题是，它们的堆叠顺序错误。最后一列是frist，第一列是底部。

这是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);
    });

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

Answer 2

获取元素的长度/数量
从该号码中扣除。
乘以10之类的数字，这样就不会达到1或0的z-index。

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

Answer 3

在.column divs中使用z-index

检查一下，http://jsfiddle.net/9EKK2/

在您的工作代码中使用该css ......

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

3 个答案: