是什么导致 y 坐标不正确？答案

【问题标题】：What is causing the y-coordinate to be incorrect?是什么导致 y 坐标不正确？
【发布时间】：2013-07-23 05:02:58
【问题描述】：

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

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

【问题讨论】：

当您打开 foxguide 或其他一些像素测量工具时，它会显示元素正在准确地定位到您告诉它的位置。所以......它的工作原理。更改data-pos-y 属性以重新定位框

标签： jquery css image coordinates

【解决方案1】：

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

但是，这仅修复了您的一些示例。它修复了您的最后一个问题，但不是您的第一个问题。

【讨论】：