5

我在以这种方式包装在 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');
    });
});
4

3 回答 3

1

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

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

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

于 2012-06-03T19:54:12.753 回答
0
  1. 获取元素的长度/数量
  2. 从那个数字中扣除。
  3. 乘以一个像 10 这样的数字，这样你就不会达到 1 或 0 的 z-index。

.

var rows = $(".somecontainer").children('div').get();
$.each(rows, function(index, ele) {
    $(ele).css({"z-index": (rows.length - i) * 10 });
});
于 2015-09-15T18:47:27.360 回答
-1

在 .column div 中使用 z-index

检查这个，http://jsfiddle.net/9EKK2/

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

于 2012-06-03T14:42:15.017 回答