将子元素（div）添加到父元素（div），如何阻止每个影响子元素最大值的子元素？

Question

在this jQuery code，我动态地添加框画布DIV这样的：

var canvas = $('#canvas'); 
canvas.append('<div id="1"></div>'); 
('#1').addClass('ui-boxer') 
       .css({ border: '1px solid white', 
         background: 'orange', 
         padding: '0.5em', 
         position: 'relative', 
         'z-index': 100, 
         left: '1%', top: '10%', 
         width: '40%', height: '50%'}); 

canvas.append('<div id="2"></div>'); 
$('#2').addClass('ui-boxer') 
       .css({ border: '1px solid white', 
         background: 'orange', 
         padding: '0.5em', 
         position: 'relative', 
         'z-index': 100, 
         left: '50%', top: '10%', 
         width: '20%', height: '50%'}); 

这些箱子被创建好了，但第二个框的顶部位置是错误的。这是10％（像第一个盒子），但显然不能正常工作。我认为第一个孩子的存在正在影响它？我如何设置顶层值，使其基于父元素（canvas div）而不是它之前的子元素？谢谢阅读。

Answer 1

将位置更改为绝对位置。

入住这 http://jsfiddle.net/heQFB/1/

Answer 2

您应该使用绝对定位。画布div的定位设置为相对（如<div id="canvas" style="position: relative;"></div>），并设置你的孩子的div，以绝对的，即：

$(function() { 

var canvas = $('#canvas'); 
canvas.append('<div id="1"></div>'); 
$('#1').addClass('ui-boxer') 
       .css({ border: '1px solid white', 
         background: 'orange', 
         padding: '0.5em', 
         position: 'absolute', 
         'z-index': 100, 
         left: '1%', top: '10%', 
         width: '40%', height: '50%'}); 

canvas.append('<div id="2"></div>'); 
$('#2').addClass('ui-boxer') 
       .css({ border: '1px solid white', 
         background: 'orange', 
         padding: '0.5em', 
         position: 'absolute', 
         'z-index': 100, 
         left: '50%', top: '10%', 
         width: '20%', height: '50%'}); 
});