Как я могу создать много div'ов поверх другого, используя CSS / jQuery?

Question

По сути, я хочу, чтобы многие (> 25) div отображались один над другим, чтобы за один раз можно было видеть только один элемент.У меня реализован перетаскиваемый интерфейс jQuery UI, поэтому после удаления элемента div отображается следующий элемент div.Какой CSS мне нужен, чтобы сделать такой стек div?JQuery также доступен при необходимости.Спасибо!

Answer 1

Попробуйте это:

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

РЕДАКТИРОВАТЬ:

Я простозаметил, что по какой-то причине в IE и Safari .draggable() переопределяет позиционирование absolute с помощью relative, поэтому вам нужно установить его обратно на absolute после того, как вы сделали его перетаскиваемым.

Обновлен пример выше.

http://jsfiddle.net/p9wWA/

Answer 2

Ты имеешь в виду что-то подобное?

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