jquery - 将子元素 (div) 添加到父元素 (div)，我怎样才能阻止每个子元素影响它之后的子元素的最高值？

Question

在this jQuery code ，我正在像这样动态地将框添加到 Canvas 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%(与第一个框一样)，但显然无法正常工作。我认为第一个 child 的存在会影响它吗？如何设置最高值，使其基于父元素( Canvas div)而不是它之前的子元素？感谢阅读。

Answer 1

将位置更改为绝对位置。

检查这个 http://jsfiddle.net/heQFB/1/