How to reverse z-index on stacked divs

Question

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>

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.

Here's the 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 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');
    });
});

Answer 1

Here's what I ended up with:

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

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.

Answer 2

1. Obtain the length/number of elements
2. Deduct from that number.
3. Multiply by a number like 10 so you don't hit 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, http://jsfiddle.net/9EKK2/

just use that css in your working code...