How can I create many divs on on top of the other using CSS/jQuery?

Question

Basically, I want many(>25) divs to be displayed one on top of the other so that only one can be seen at a time. I have the jQuery UI draggable implemented, so once a div is dragged away, the next div is shown. What CSS do I need to make such a stack of divs? jQuery is also available if required. Thanks!

Answer 1

You mean something like this?

#relative_container { position: relative; }
#relative_container div { position: absolute; top: 0; left: 0; width: 100px; height: 100px; }
#relative_container div.item_1 { z-index: 100; } /* Higher index means its more on top */

Answer 2

Try this:

CSS

div.square {
    cursor: pointer;
    width: 100px;
    height: 100px;
    border: 2px dashed purple;
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 50px;
    line-height: 100px;
    text-align: center;
    color: white;
}

jQuery + jQueryUI

var count = 25;

var colors = ['red','green','blue','orange','yellow'];

while(count--) {
    $('<div/>',{className:'square', text:count}).draggable().css({position:'absolute','z-index':count, text:count, backgroundColor:colors[count % 5]})
                                    .appendTo('body');
}

EDIT:

I just noticed that for some reason in IE and Safari .draggable() overrides the absolute positioning with relative, so you need to set it back to absolute after you made it draggable.

Updated the example above.

http://jsfiddle.net/p9wWA/