如何反转堆叠div上的z

本文介绍了如何反转堆叠div上的z-index的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在一个网页上有多个列，以这种方式包装在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.