JQuery: расположение вложенных диалогов

Question

Существует ли простой способ автоматически позиционировать перекрывающееся вложенное диалоговое окно, например, следующее (предположим, сначала создается синий диалог, затем красный, затем желтый), каждый раз, когда создается диалог:

Answer 1

Вы можете сделать это, выяснив, сколько диалогов уже было создано, перед созданием нового, затем используя множитель слева и сверху, чтобы правильно расположить новое диалоговое окно.

var currentDialogs = $("div.Dialog").length;

Далее, когда вы создаете новый диалог, используйте значение, чтобы правильно его расположить:

$("<div class='Dialog' />").css({ 'margin-top': (currentDialogs * 20) + 'px', 'margin-left': (currentDialogs * 20) + 'px'}).appendTo("#theParentDiv");

Answer 2

Создайте свою вложенную структуру div

<div class="a">
     <div class="b">
          <div class="c">
          </div>
     </div>
</div>

Затем создайте класс, который сдвигается настолько, насколько вы хотите, чтобы каждое поле сдвигалось.

.shift{
    left: 20px;
    top: 20px;   
}
.a, .b, .c{
    position: absolute;
}

Затем с помощью jquery добавьте этот класс

$('.b').addClass('shift');
$('.c').addClass('shift');