JQuery: nested dialogs positioning

Is there a simple way to automatically position the overlapping nested dialog like this (suppose 开发者_如何转开发the blue dialog is created first, then the red one, then the yellow one), each time the dialog is created:

You can do this by figuring out how many dialogs have already been created, before creating the new one, then using a multiplier on the left and top margin to correctly position the new dialog.

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

Next, when you create the new dialog, use the value to position it correctly:

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

Create your nested div structure

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

Then create a class that shifts however much you want each box to shift.

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

Then with jquery add that class

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