Получение смещения элемента возвращает одинаковые значения перед установкой позиции: absolute

Question

Моя проблема в том, что у меня есть 2 <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>

Answer 1

Это 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');