Javascript 追加相对元素时会发生什么变化？

我注意到，当我将一个相对元素附加到另一个元素时，某些元素会发生变化，随后的元素总是添加到前一个元素的右侧，因此在附加过程中的某个点上，一个左值似乎会发生变化，但我不知道是哪一个

一个小例子是向div添加5个跨距，并将它们全部放置在左侧：10和顶部：10

要使它们相互重叠，您必须从左边的值中获取添加的项目数量。i、 e添加5个项目后，以下项目的剩余值将为10-5*10

有没有其他方法可以找出附加项的左边值应该是多少，以便它位于前面的值之上

下面是一些代码示例和示例

Html

Javascript

for(var i=0;i<5;i++)
{
   var element=$('#el').clone();
   $(element).html(i);
   $(element).attr("id","el"+i);

   $('#container').append(element);
   $(element).css({                  
        left: 10,
        top: 10,
        position: 'relative',
        marginRight: 0
    });
}
$('.drag').draggable();

---

for（var i=0；i之所以发生这种情况，是因为当您使用
position:relative
时，元素仍然占据页面上的空间，影响其他元素。这就是为什么您添加的每个10px left属性也会将下一个元素推到左侧。

正如评论中已经指出的，使用
position:absolute
解决了这个问题，因为“absolute”值使元素从页面中浮出来，不再占用空间，也不会影响其他元素

与其说我在寻找一个“修复”，不如说我希望它能正常工作
要知道元素中的值是否发生了更改，请单击“相对”
元素被追加或从中删除

如果您向元素添加另一个元素（如果这是您所要求的），则元素的css不会改变。您看到的行为是由浏览器按照您所要求的方式安装元素引起的。由于“left:10；top:10；”已被占用，它会尝试将其安装在附近的某个位置。也就是说，没有什么可以阻止您计算数量特定元素包含的元素的nt。（
$（'#container'）.children（）.length
），或元素在页面上的偏移量（实际位置；
$（'#el4'）.offset（）.left
或
$（'#container.drag:last child'）.offset（）.left
）。因为相对元素总是相对于其他元素来定位自己，所以这很可能不会对您有多大帮助


要让它们彼此重叠，你必须承受
从左值添加的项目。即，一旦添加5个项目
以下项目的左边将是10-5*10

有没有其他方法可以找出
附加的项目应该是这样的，它在前面的项目之上

如果希望元素实际堆叠，可能需要更改代码，使它们正确地彼此相邻显示，然后使用
左边距
将左边框移动到元素中，使它们彼此重叠显示。
.draggable（）
将从那里计算位置，只要在使元素可拖动后不更改DOM，就可以了

示例JSFIDLE：

我不完全确定您想做什么，但听起来您需要使用绝对定位而不是相对定位。似乎您可能需要将父项设置为
relative
，然后使用
absolute
。结果应该是什么？您能做一个小草图吗？
position:relative
有两个含义。首先，这意味着他们的子元素将相对于它进行定位。第二个意思是在这里影响你的。这意味着元素将相对于它的点火位置进行定位。因此，如果你将
10px设置为left
，这意味着跨度将为10px，在你选择的位置的右侧不要设置任何内容。如果您希望采用
10px 5*10px
的方式，那么您可以将span设置为
absolute
，并将其容器设置为
relative
，这是关于我给出的第一个定义和James评论。我已经更新了问题。absolute是正确的方式，但不是我想要的，只是想找一些eNLEINGING re:追加相对元素扫描您解释“影响其他元素”？是否有一些偏移改变或其他什么？这就是我想知道的“位置：相对”元素仍然作为一个普通元素工作。它占据了页面上的空间，这意味着它后面的每个元素都将被放置在它旁边，而不是上面。这是任何元素的HTML默认行为。尝试按顺序创建两个输入，一个将出现在另一个旁边，而不是上面。但关键是“位置：相对”您可以设置“左”、“上”、“右”或“下”偏移量，使其偏离原来的位置。但是，它应该占用的空间仍然保留在那里。“位置：绝对”，另一方面，将元素从页面上浮动。尝试按“位置：绝对”和“左：0”顺序创建两个输入。一个将显示在另一个之上，因为它们在页面范围中不属于同一级别。
for(var i=0;i<5;i++)
{
   var element=$('#el').clone();
   $(element).html(i);
   $(element).attr("id","el"+i);

   $('#container').append(element);
   $(element).css({                  
        left: 10,
        top: 10,
        position: 'relative',
        marginRight: 0
    });
}
$('.drag').draggable();

for(var i=0;i<80;i++)
{
    var element=$('#el').clone();
    $(element).html(i);
    $(element).attr("id","el"+i);
    //$element.addClass('element');
    $('#container').append(element);
}
$('#el').remove();
$('.drag').draggable();

.drag {
    width: 40px;
    height: 40px;
    border: 1px dotted blue;
    background: #FEEFEF;

    display: block;
    float: left;
    margin-left: -25px;
}

#container {
    padding-left: 25px;
    width: 200px;
}