How to undo z-index on folded divs

Question

I have several columns on a page enclosed in divs as follows:

<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> 

I mainly use a plugin that splits the text and puts them left and right. In my css, I rearrange them so that they stack onto each other, and then I use some jquery to move each column to the side. The problem is that they are stacked in the wrong order. The last column is frist, the first column below.

Here is CSS

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

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 quite how to do it, JS is not my strength. It also seems fragile to me. Is there a way to just change the stacking order? Here is my very simple jQuery:

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

Answer 1

Here is what I ended up with:

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

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

Answer 2

• Get the length / number of elements
• Subtract from this number.
• Multiply by a number like 10 so you don't get into the z-index of 1 or 0.

.

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

Answer 3

use z-index in your .column divs

check this out, http://jsfiddle.net/9EKK2/

just use this css in your working code ...