获取元素偏移量在设置位置之前返回相同的值:绝对值

Getting element offset returns same values before setting position: absolute

本文关键字：绝对值 返回 偏移量 元素 设置 位置 获取      更新时间：2023-09-26

我的问题是我有两个<div>s，包含相同的元素。这些元素被放置在彼此下方。当将元素的top和left属性设置为.offset()提供的值，然后将position设置为absolute时，元素的偏移值均返回为0。为什么？

$(function(){
    $('[data-distance]').each(function(i,el){
        var $this = $(el),
            offset = $this.offset();
        $this.css(offset);
        $this.css('position','absolute');
    });
});
body {
    margin: 0;
    height: 1000px;
    font-family: arial;
}
h1 {
    margin: 0 0 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div data-distance="1">
    <h1>Text</h1>
    <p>Assssssdddddddasdasdasdasdasdasdasdsda</p>
</div>
<div data-distance="0.5">
    <h1>Text</h1>
    <p>Assssssdddddddasdasdasdasdasdasdasdsda</p>
</div>

它是0，因为当循环的第一次迭代发生时，它将第一个$('[data-distance]')的位置设置为绝对值，所以当第二次迭代发生后，第一个元素位于top: 0、left: 0的位置。因此，应该在找到所有匹配元素的偏移量之后添加属性position: absolute。

应该是这样的http://jsfiddle.net/vp7jt2xj/

$('[data-distance]').each(function (i, el) {
    var $this = $(el),
        offset = $this.offset();    
    $this.css(offset);    
});
$('[data-distance]').css('position', 'absolute');
相关文章：