如何反转堆叠div上的z-index [英] How to reverse z-index on stacked divs

问题描述

我在一个网页上有多个列，以这种方式包装在div中：

I have multiple columns on a page wrapped in divs this way:

<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移动每个列的方式。问题是，他们堆叠在错误的顺序。

I'm basically using a plugin that columnizes text and positions them left to right. In my css, I reposition them so they stack on top of each other, and then I use some jquery to move each column out of the way. Problem is, they're stacking in the wrong order. The last column is frist, the first column is on the bottom.

这里是CSS

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

如何更改堆叠顺序？是最好的解决方案使用jQuery添加一个z索引到每个div？我不是完全怎么做，JS不是我的力量。这也似乎对我很脆弱。有没有办法简单地逆转堆叠顺序？这里是我非常简单的jQuery：

What can I do to change the stacking order? Is the best solution to use jQuery to add a z-index to each div? I'm not entirely how to do that, JS is not my strength. That also seems kind of brittle to me. Is there a way to simply reverse the stacking order? Here's my very simple jQuery:

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

推荐答案

Here's what I ended up with:

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

其中num表示页面上的列数，加上根据最高z -index在其他元素。

Where num is actuall the number of columns on the page, plus an arbitrary amount based on the highest z-index in the other elements.

这篇关于如何反转堆叠div上的z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！