Question

我注意到当我将一个相对元素附加到另一个元素时会发生一些变化而后续元素总是被添加到前一个元素的右边，所以看起来在追加过程中的某个时刻左边的值被改变了但是我无法弄清楚哪个？

一个小例子是向div添加5个跨度并将它们全部放在左边：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

发生这种情况是因为当您使用position:relative时，元素仍会占据页面上的空间，从而影响其他元素。这就是为什么你添加的每个10px左边的属性，也将下一个元素推向左边正如已经在评论中指出的那样，使用position:absolute解决了这个问题，因为“绝对”值会使元素从页面中浮出来，并且它不再占用其空间，也不会影响其他元素

Answer 2

我不是在寻找一个“修复”，因为我有它的工作，我只是喜欢知道一旦亲戚在元素中是否有值的变化元素被追加或删除

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

要让它们在彼此的顶部，你必须采取相应的数量   从左侧值添加的项目。一旦你添加了5个项目   以下项目的左侧将是10-5 * 10

还有其他方法可以找出剩下的价值   附加项目应该是如此，它是在上一个？
之上

如果您希望元素实际堆叠，您可能需要更改代码以使它们正确显示在彼此旁边，然后使用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;
}

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

2 个答案: