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

have you tried to use `float: right` instead of `float: left` ? — Vitaly Muminov, Jun 03 '12 at 14:24
Yes, it didn't seem to change the index order of the elements. I ended up figuring out how to user jQuery's each method and subtract the index of the div from the number of columns to set the z-index in progression. I just can't update with my answer yet. — Slick23, Jun 03 '12 at 14:26
Ensuring that higher z-index go to the element to be on top is sufficient. Here it'd be 2 on the first one, 1 on the second one and 0 on the last one, or with the values provided by @SalilMomin in his answer. https://developer.mozilla.org/en/CSS/Understanding_z-index goes far beyond than that in their explanations, if needed. Just verify in lesser IEs what is the result, they're buggy as hell. — FelipeAls, Jun 03 '12 at 14:47

score 1 · Accepted Answer · answered Jun 03 '12 at 19:54

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.

answered Jun 03 '12 at 19:54

Slick23

5,827
10
41
72

score 0 · Answer 2 · answered Sep 15 '15 at 18:47

Obtain the length/number of elements
Deduct from that number.
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 });
});

score -1 · Answer 3 · answered Jun 03 '12 at 14:42

-1

use z-index in your .column divs

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

just use that css in your working code...

answered Jun 03 '12 at 14:42

Salil Momin

361
3
11

The problem is that there will be situations where there might be 10 divs, or a hundred. It can't be hard coded into the CSS. – Slick23 Jun 03 '12 at 19:53
you can manage that dynamically with either php or javascript... it's easy – Salil Momin Jun 04 '12 at 15:13
2

And that's what the question *was* asking, how to manage with JS. I don't use PHP. – Slick23 Jun 06 '12 at 19:34

How to reverse z-index on stacked divs

3 Answers3

Linked