什么导致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坐标不正确？

回答

相关问题