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％（就像第一个盒子一样），但它显然无法正常工作。我认为第一个孩子的存在正在影响它吗？如何设置顶部值，使其基于父元素（画布div）而不是之前的子元素？谢谢你的阅读。

Answer 1

将位置更改为绝对。

检查一下 http://jsfiddle.net/heQFB/1/

Answer 2

你应该使用绝对定位。将canvas div的位置设置为relative（例如<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%'});
});

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

2 个答案: