绝对定位元素的CSS left和top属性的计算不符合响应设计的预期

Question

我在父容器中有一个位置相对的响应图像。在同一个父容器中，我有一个位置：绝对固定在具有更高z索引值的图像上。

在静态设计中，引脚显示在正确的位置，但如果我想让它起到响应的作用，看起来浏览器没有正确计算百分比，引脚也没有显示在正确位置。

为了解决这个问题，我使用了jquery，它以像素为单位计算响应img的大小，还以像素为单元计算pin的css左侧和顶部位置。但这仍然不起作用。

HTML

<div class="col-xs-12" id="map">
            <img src="../img/world-map.jpg" alt="world-map" id="world-map">
            <a href="#" class="sydney" data-toggle="modal" data-target="#sydney-modal"></a>
            <a href="#" class="melbourne" data-toggle="modal" data-target="#sydney-modal"></a>
            <a href="#" class="perth" data-toggle="modal" data-target="#sydney-modal"></a>
            <a href="#" class="singapore" data-toggle="modal" data-target="#sydney-modal"></a>
            <a href="#" class="hongkong" data-toggle="modal" data-target="#sydney-modal"></a>
            <a href="#" class="india" data-toggle="modal" data-target="#sydney-modal"></a>
            <a href="#" class="china" data-toggle="modal" data-target="#sydney-modal"></a>
</div> <!-- end col map-->

链接到测试页面：http://test.nsg.unsw.edu.au/contact/

较少

#map
    {
        position:relative;
        #world-map
        {
            width:100%;
            z-index:-100;               
        } //end word-map
        .sydney{
            position:absolute;
            width:12px;
            height:12px;
            background-color:red;
            /*left: 81.5%;
            top: 77.5%;*/
            }
    }

Javascript解决方案

$( document ).ready(function() {
        $('nav li:contains("Contact us")').addClass("active");
        //get width and height of image in px
        var imgWidth=$("#world-map").width();
        var imgHeight=$("#world-map").height();
        //console.log("image width x height ="+imgWidth+"x"+imgHeight);
        //change icon position according to the percantage of where location is found
        var sydneyLeft=0.815;
        var sydneyTop=0.775;
        //console.log("location left x top % ="+sydneyLeft+"x"+sydneyTop);
        var sydneyLeftpx=0.815*imgWidth;
        var sydneyToppx=0.775*imgHeight;
        //console.log("location left x top px ="+sydneyLeftpx+"x"+sydneyToppx);
        sydneyLeftpx=toInt(sydneyLeftpx);
        sydneyLeftpx=sydneyLeftpx-6; //location-pinwidth
        sydneyToppx=toInt(sydneyToppx);
        sydneyToppx=sydneyToppx-6; //location-pinheight
        //alert("location left x top px ="+sydneyLeftpx+"x"+sydneyToppx);
        $(".sydney").css({left: sydneyLeftpx+"px",
                        top: sydneyToppx+"px"               
            });
});

注意：我还没有为javascript代码添加屏幕调整功能，只是通过刷新浏览器窗口来测试代码。

有人能解释一下为什么这些值没有正确计算，以及我如何解决这个问题吗？

Answer 1

问题

我想使用img标记创建一个类似html地图标记的效果，该标记具有较小的z索引，并在img标记上使用pin/location。

我能够在静态设计中成功地做到这一点，但在响应设计图像中却没有起到相应的作用。最初，我试图通过使用css百分比来解决这个问题，但不同屏幕大小的引脚/位置总是不同的。我试图通过计算图像纵横比来解决这个问题，然后使用Javascript以像素为单位更改引脚位置。它也不起作用。

解决方案

我使用HTML地图标记和区域标记解决了这个问题。我使用了Matt Stow的一个插件使地图具有响应性。http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html