javascript - 添加相对元素时会发生什么变化？

Question

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

一个小例子是将 5 个 span 添加到一个 div 并将它们全部放在 left:10 和 top:10

要将它们放在彼此之上，您必须从左值中获取添加的元素数量。即，一旦您添加 5 个元素，以下元素的剩余将是 10-5*10

是否有任何其他方法可以找出附加项的左值应该是多少，以便它位于前一项之上？

这里有一些代码示例和一个 jsfiddle link

HTML

<div id="container"></div>
<span id="el" class="drag"></span>

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();

更新:

我并不是在寻找“修复”，因为我已经在使用它了，我只是想知道在添加或删除相关元素后元素中的值是否发生了变化

Answer 1

I'm not so much looking for a "fix" as I have it working I'd just like to know if there's a value change in the element once a relative element is appended or removed from it

如果您向其中添加另一个元素，则元素的 css 不会更改(如果这是您所要求的)。您看到的行为是由浏览器按照您的要求调整元素引起的。从'左:10;前10名;'已经被占用，它试图将它放在附近的某个地方。也就是说，没有什么能阻止您计算某个元素包含的元素数量。 ($('#container').children().length)，或者元素在页面上的偏移量(实际位置；$('#el4').offset( ).left 或 $('#container .drag:last-child').offset().left).因为相对元素总是相对于其他元素定位自己，所以这很可能不会对您有太大帮助。

---

To have them on top of each other you'd have to take the amount of items added from the left value. i.e once you add 5 items the following item's left will be 10-5*10

Are there any other ways to find out what the left value of the appended item should be so it goes on top of the previous?

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

示例 jsfiddle:http://jsfiddle.net/LmW8T/2/

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();

使用 CSS:

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

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

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