CODEWITHSUNDEEP
javascriptjquerycss
Rohan
Rohan

Reputation: 3795

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

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!

Upvotes: 0

Views: 269

Answers (2)

user113716
user113716

Reputation: 322462

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/

Upvotes: 3

janhartmann
janhartmann

Reputation: 15003

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

Upvotes: 1

Related Questions