Javascript div中的嵌套div不会覆盖

我有几个嵌套的div，一个外部div，然后是一个页面包装器，然后是页面包装器内部的两个div。其中的两个div被生成并添加到页面包装器中。如果两个div的顶部和左侧值相同，则div不会重叠，而是环绕在前一个div的下方。 附件是我到目前为止的代码。我需要在页面包装中的2个div不要像现在这样包装

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

.外容器
{
溢出：自动；
高度：900px；
宽度：900px；
边框：1px纯黑；
背景颜色：黄色；
填充物：5px；
}
#页面包装{宽度：800px；高度：700px；边框：2px实心#ccc；填充：0px；背景色：白色；位置：相对}
classvalue=“可拖动的ui小部件内容divimage”；
idvalue=“div1”；
thisdiv=''；
$（“#页面包装器”）.append（thisdiv）；
idvalue=“div2”
thisdiv2=''；
$（“#页面包装器”）.append（thisdiv2）；

如果我理解正确，您希望生成的两个div重叠吗？只需添加

位置：绝对到那些div

别忘了把一个单位（px）放在你的上/左/宽/
 coordonates的值需要一个单位，除非值为0