什麼導致y座標不正確？

所以我創建了一個遍歷一組圖像的erb塊，然後在給定的座標處爲每個圖像顯示div.tagged。在這個特定的情況下，塊重複4個圖像。我在下面創建的很棒，但標籤的座標已關閉。有任何想法嗎？這是一個jsFiddle that shows the code in action。提前致謝。什麼導致y座標不正確？

ERB：

<div class="container"> 

<% 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) %> 

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

     <%= o_connection.product.full_name %> uses a <%= cord.name %> to plug into <%= i_connection.product.full_name %><br> 

     <%= 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 class="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 %> 

</div>

的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')) + -125; 
    console.log(ypos) 
    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)   
}); 

$("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>

CSS

.image_panel{ 
    float:left; 
    width:600px; 
    position:relative; 
} 
.image_panel img{ 
    left:0;top:0px; 
    max-width: 600px; 
    overflow: hidden; 
} 

.tagged { 
    position: absolute; 
    z-index: 3000; 
} 

.main_panel{ 
    margin: auto; 
    padding: 10px; 
    width: 1000px; 
}

來源

2013-07-23 Eric Filkins

當您調出foxguide或其他像素測量工具時，它會顯示這些元素正好位於您告訴它的位置。所以......它的工作。將'data-pos-y'屬性更改爲重定位該框 –

我認爲問題的一部分是，.taggedposition: absolute被錨定到父。 A position: absolute元素錨定到最接近的父親position。在這種情況下，這是您的.image_panel。但是最後的.image_panel包含其他文字，可以將圖片下壓，而.tagged保持原樣。您應該確保僅在img和標籤地圖div附近有position: relativediv。

但是，這隻修復了一些例子。它修復你最後一個，但不是你的第一個。

來源

2013-07-23 05:45:17

什麼導致y座標不正確？

回答

相關問題