jquery - 是什么导致 y 坐标不正确？

Question

所以我创建了一个 erb block ，它遍历一组图像，然后在给定坐标处为每个图像显示 div.tagged。在这种特殊情况下， block 迭代 4 个图像。我在下面创建的内容效果很好，但标签的坐标已关闭。有任何想法吗？这是一个 jsFiddle that shows the code in action .提前致谢。

再培训局:

<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;
}

Answer 1

我认为部分问题是 .tagged position: absolute 锚定到的父对象。 position: absolute 元素锚定到最近的具有 position 的父元素。在这种情况下，它就是您的 .image_panel。但是您的最后一个 .image_panel 包含将图片向下推的其他文本，而 .tagged 则保留在原位。您应该确保只有 img 和标签映射 div 周围有一个 position: relative div。

但是，这只能修复您的一些示例。它修复了你的最后一个，但不是你的第一个。