divs imbriqués dans une superposition div - javascript, jquery, css, html

J'ai quelques divs imbriqués, un extérieur, puis une pagewrapper et ensuite deux div à l’intérieur du wrapper. les deux divs sont générés et ajoutés au wrapper de page. si les 2 divs ont les mêmes valeurs de haut et de gauche, les divs ne se chevauchent pas mais reviennent au-dessous du div précédent. Vous trouverez ci-joint le code que j'ai jusqu'à présent. J'ai besoin des 2 divs dans l'emballage de la page pour ne pas envelopper comme il est.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.outer-container
{
overflow:auto;
height:900px;
width: 900px;
border:1px solid black;
background-color:yellow;
padding:5px;

}
#page-wrapper { width: 800px; height:700px; border:2px solid #ccc; padding: 0px; background-color:white; position:relative }

</style>

<div class="outer-container">
<div id="page-wrapper" >
</div>
</div>

<script>
classvalue = "draggable ui-widget-content divimage";
idvalue= "div1";
thisdiv = "<div style="height:100;width:100;background-color:blue;top:1;left:1;z-index:0;margin:0px" id=""+idvalue+"" class=""+classvalue+""></div>";
$("#page-wrapper").append(thisdiv);
idvalue= "div2"
thisdiv2 = "<div style="height:100;width:100;background-color:teal;top:2;left:2;z-index:1" id=""+idvalue+"" class=""+classvalue+""></div>";
$("#page-wrapper").append(thisdiv2);
</script>

Réponses:

Si j'ai bien compris, vous voulez que les 2 div générées se chevauchent? Il suffit d'ajouter position:absolute; à ces divs.

Et n'oubliez pas de mettre une unité (px) en haut / à gauche / largeur / ...