jquery - これらの div が同じ位置にないのはなぜですか?

Question

そこで、座標をデータベースに保存する画像タガーを作成しました。これは、画像のタグ付け用に指定されたページに実装されています。次に、これらの画像をメイン ページの erb ブロックで呼び出して、尊重された座標を反復処理し、jQuery を使用してその場所に div (.tagged) を表示します。ただし、タグがメイン ページに表示されると、接続ページでタグ付けしたときの場所にはありません。座標は同じですが、位置が異なります。これがなぜなのか、誰にも考えがありますか？どんな助けでも大歓迎です。

メインページから生成された HTML

タグ付けページから生成された HTML

タガーのjsFiddle(CSS含む)

画像を反復処理する ERB ブロック。この特定のケースでは、4 つのイメージがあります。

<% if @new_manual.present? %>
<% n = 0 %>
<% @new_manual.steps.each do |step| %>
    <% n += 1 %>

    <% i_connection = Contact.find(step.input_contact) %>
        <span class="i_contact i_contact<%= n %>" data-pos-x="<%= i_connection.pos_x %>" data-pos-y="<%= i_connection.pos_y %>"  data-pos-width="<%= i_connection.pos_width %>" data-pos-height="<%= i_connection.pos_height %>" ="spanid<%= n %>" data-index="<%= n %>"></span>


    <% o_connection = Contact.find(step.output_contact) %>
        <span class="o_contact o_contact<%= n %>" data-pos-x="<%= o_connection.pos_x %>" data-pos-y="<%= o_connection.pos_y %>"  data-pos-width="<%= o_connection.pos_width %>" data-pos-height="<%= o_connection.pos_height %>" id="spanid<%= n %>" data-index="<%= n %>"> </span>
        <% cord = CordType.find(step.contact_item) %>


<div class="main_panel">
<div style='margin: auto; width: 600px;'>
    <div id="image_panel<%= n %>" style="float:left; width:600px; position:relative;">
        <%= image_tag(i_connection.image.image.url(:large)) %>
<div class="i_tagmap<%= n %>"></div>
</div>
</div>
</div>

<div class="main_panel">
<div style='margin: auto; width: 600px;'>
    <div id="image_panel<%= n %>" style="float:left; width:600px; position:relative;">

        <%= image_tag(o_connection.image.image.url(:large)) %>
<div class="o_tagmap<%= n %>"></div>
</div>  
</div>  
</div>

<% end %>   
<% end %>

jQuery (メイン ページでのタグの表示方法)

<script type="text/javascript">
$(document).ready(function(){

$('span.i_contact').each(function() {                
    var pos_width = $(this).data('pos-width');
    var pos_height = $(this).data('pos-height');
    var xpos = $(this).data('pos-x');
    var ypos = $(this).data('pos-y');
    var taggedNode = $('<div class="tagged" />')
    taggedNode.css({
        "border":"5px solid red",
        "width":pos_width,
        "height":pos_height,
        "left":xpos,
        "top":ypos
    });

    var n = $(this).data('index')
    $('.i_tagmap' + n).append(taggedNode)  
    console.log(taggedNode.position())    
});

$("span.o_contact").each(function() {            
    var pos_width = $(this).data('pos-width');
    var pos_height = $(this).data('pos-height');
    var xpos = $(this).data('pos-x');
    var ypos = $(this).data('pos-y');

    var taggedNode = $('<div class="tagged" />')
    taggedNode.css({
        "border":"5px solid red",
        "width":pos_width,
        "height":pos_height,
        "left":xpos,
        "top":ypos  
    });
    var n = $(this).data('index')
    $('.o_tagmap' + n).append(taggedNode)        
});
});
</script>   

これは私が説明するのが難しいことなので、省略していることが有益である可能性がある場合は、それも喜んで追加します.