当追加一个相对元素时，会发生什么变化？
我注意到，当我将一个相对元素附加到另一个元素时，会发生一些变化，随后的元素总是被添加到前一个元素的右边，所以在追加期间的某个点上，左值似乎发生了变化，但我不知道是哪一个呢？
一个小的例子是在一个div中添加5跨，并将它们全部放置在左侧:10和顶部:10。
要使它们相互覆盖，就必须从左边的值中提取增加的项目的数量。也就是说，一旦您添加5项，下面的项的左边将是10-5*10
是否有其他方法可以找出附加项的左值，以便将其置于前面的值之上？
下面是一些代码示例和一个琴键
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();更新：
我与其说是在寻找“修复”，不如说是让它起作用，我只想知道元素中的值是否会在元素中追加或删除后发生更改。
回答 2
Stack Overflow用户
发布于 2014-02-22 18:32:19
我与其说是在寻找“修复”，不如说是让它起作用，我只想知道元素中的值是否会在元素中追加或删除后发生更改。
如果您所要求的是另一个元素，则元素中的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;
}Stack Overflow用户
发布于 2014-02-21 15:07:57
这是因为当您使用position:relative时，元素仍然占据页面上的空间，影响到其他元素。这就是为什么您添加的每个10 to左属性也会将下一个元素推到左侧。
正如在注释中已经指出的，使用position:absolute解决了这个问题，因为“绝对”值使元素从页面中浮出，不再占用空间，也不影响其他元素。
https://stackoverflow.com/questions/21937629
复制相似问题
腾讯云开发者
