Jquery 将子元素（div）添加到父元素（div）中，如何阻止每个子元素影响其后面的子元素的顶部值？

在中，我动态地向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%'});

var canvas=$（'#canvas'）；
canvas.append（“”）；
（“#1”）.addClass（'ui-boxer'））
.css（{边框：“1px纯白”，
背景：“橙色”，
填充：“0.5em”，
位置：'相对'，
“z指数”：100，
左：“1%”，顶：“10%”，
宽度：“40%”，高度：“50%”）；
canvas.append（“”）；
$（'#2'）.addClass（'ui-boxer'））
.css（{边框：“1px纯白”，
背景：“橙色”，
填充：“0.5em”，
位置：'相对'，
“z指数”：100，
左：“50%”，顶：“10%”，
宽度：“20%”，高度：“50%”）；

---

框的创建正常，但第二个框的顶部位置错误。它是10%（就像第一个盒子），但它显然不能正常工作。我想第一个孩子的出现会影响它吗？如何设置top值，使其基于父元素（canvas div）而不是之前的子元素？感谢阅读。

将位置更改为绝对

检查这个

---

您应该使用绝对定位。将画布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%'});
});

$（函数（）{
var canvas=$（“#canvas”）；
canvas.append（“”）；
$（'#1'）.addClass（'ui-boxer'））
.css（{边框：“1px纯白”，
背景：“橙色”，
填充：“0.5em”，
位置：'绝对'，
“z指数”：100，
左：“1%”，顶：“10%”，
宽度：“40%”，高度：“50%”）；
canvas.append（“”）；
$（'#2'）.addClass（'ui-boxer'））
.css（{边框：“1px纯白”，
背景：“橙色”，
填充：“0.5em”，
位置：'绝对'，
“z指数”：100，
左：“50%”，顶：“10%”，
宽度：“20%”，高度：“50%”）；
});

您上面的代码应该带来一个错误

（'#1'）。addClass（'ui-boxer'）

应该是

$（'#1'）。addClass（'ui-boxer'）

非常独特的答案！你不觉得吗？谢谢你的回答。使用absolute的问题是，框顶部和左侧参数不再与canvas div相对，例如@ben-将canvas标记包装在一个div中，即

position:relative

，因此绝对位置实际上是相对div的绝对位置。