Javascript 图像上方的Div从图像上的正确位置移出

我把一个div放在背景图像的顶部。div是可点击的，因此它会弹出一个对话框。背景图像具有要放置div圆的点

问题是： 当背景图像左对齐且div元素具有position:absolute（绝对）时，它可以正常工作；左：x；上图：y，但我的问题是，当我尝试将图像居中对齐时，div的绝对x和绝对y不在图像中必须存在的点中。 另外，当我更改窗口的大小时，div的位置会发生平方移动。我尝试了绝对定位和相对定位

我所拥有的：

<style>
    .containerdiv { position: relative; width:100%; } 
    .cornerimage { position: absolute; top: 100px; left: 130px; } 
    .circle {
        border-radius: 50%;
        display: inline-block;
        margin-right: 20px;
        background: none repeat scroll 0 0 #701470;
        height: 24px;
        width: 24px;
    }
</style>

我的部门在这里：

<div class="containerdiv" align="center">
    <!-- my background image -->
    <img border="0" src='http://www.infokerala.org/sites/default/files/images/barry_boehms_spiral_model.jpg' alt="">

    <!-- trying absolute positioning -->
    <div class="circle" id="bar" style="top: 142px; left:875px; position: absolute;"></div>

    <!-- trying relative positioning -->
    <div class="circle" id="foo" style="top: -68px; right: 332px; left:-332px; position: relative;"></div>
<div>

正如您在图像中看到的，当我调整窗口大小时，绝对定位的div开始从图像中移出。 相对定位的div在一段时间后消失。我不知道为什么？ 我只希望div圆位于图像顶部的固定位置，而不考虑窗口大小、在页面中嵌入图像的位置或任何调整大小的活动

我想要的是：

div如何移出其初始位置：

最后，在我慢慢缩小窗口大小后，甚至相对定位的div也消失了：

---

我知道绝对定位是相对于窗口的绝对位置，但为什么我要使div粘在我想要的原始点上？

而不是使用div您考虑过使用图像地图吗？你可以让它看起来像你想要的，它的定位是基于图像的，所以它会保持在正确的位置。您也可以像潜水一样附加咔哒声

我知道图像映射被认为有点像Web1.0，但我看到它们在这种情况下非常有效地使用，通过添加JavaScript和JQuery生成非常动态的结果。这部JQuery文学作品非常出色：

---

浮动div的解决方案似乎总是有点像在圆孔中强行插入方形桩。

您是否考虑过使用图像贴图而不是使用div？你可以让它看起来像你想要的，它的定位是基于图像的，所以它会保持在正确的位置。您也可以像潜水一样附加咔哒声

我知道图像映射被认为有点像Web1.0，但我看到它们在这种情况下非常有效地使用，通过添加JavaScript和JQuery生成非常动态的结果。这部JQuery文学作品非常出色：

---

其中，浮动div的解决方案似乎总是有点像在圆孔中强制使用方钉。

因此，当您将其放置在绝对位置时，它将保持在那里，而当您的背景图像因窗口大小调整而移动时，它将离开其顶部。实际上，圆将保持在其x，y位置，这是背景在移动 你的解决办法是选择相对的。 我将您的代码放在JSFIDLE中，相关的代码运行良好

---

在这里工作很好，不知道你为什么说过一段时间后它就消失了？也许某些JS会将其删除？

因此，当您将其定位为绝对位置时，它将保持在那里，而当您的背景图像因窗口大小调整而移动时，它将离开其顶部。实际上，圆将保持在其x、y位置，而移动的正是背景 你的解决办法是选择相对的。 我将您的代码放在JSFIDLE中，相关的代码运行良好

---

在这里工作很好，不知道你为什么说过一段时间后它就消失了？也许某些JS会删除它？

因为您知道背景图像的大小，所以很容易计算百分位偏移量而不是绝对偏移量

---

假设您有一个500x500像素的图像作为背景，并且希望将圆定位在50x50位置。如果你把它放在左边：50px；top:50px即使父容器调整大小，图像仍将保持在该位置。然而，如果你把它放在左边：10%；顶部：其偏移量的10%将随定位父对象而缩放。

因为您知道背景图像的大小，所以很容易计算百分位偏移量而不是绝对偏移量

---

假设您有一个500x500像素的图像作为背景，并且希望将圆定位在50x50位置。如果你把它放在左边：50px；top:50px即使父容器调整大小，图像仍将保持在该位置。然而，如果你把它放在左边：10%；顶部：其偏移量的10%将随定位父对象而缩放。

您需要添加一个事件，在页面调整大小和加载时重新计算div的绝对位置：

    <script>
    function recalc(){
        var width, height;
       width = $('.containerDiv').width();
       height = $('.containerDiv').height();
       width = width / 2;
       height = height / 2;
       $("#bar").css({"position":"absolute","top": width + "px","left": height + "px",});
       $("#foo").css({"position":"absolute","top": width + "px","left": height + "px",});

    }

    $(window).load(function(){ recalc();});

    $(window).resize(function () { recalc();});

    </script>

---

您需要添加一个事件，在页面调整大小和加载时重新计算div的绝对位置：

    <script>
    function recalc(){
        var width, height;
       width = $('.containerDiv').width();
       height = $('.containerDiv').height();
       width = width / 2;
       height = height / 2;
       $("#bar").css({"position":"absolute","top": width + "px","left": height + "px",});
       $("#foo").css({"position":"absolute","top": width + "px","left": height + "px",});

    }

    $(window).load(function(){ recalc();});

    $(window).resize(function () { recalc();});

    </script>

---

+1这将很好地工作，只要你使用一个缩放良好的图像，并且位置不必精确到像素。这也适用于对div的小操作。基本上，我删除了container div中的图像标签并制作了

---

容器div本身的背景图像属性作为图像。现在容器div附带了它的图像。接下来，我将容器div的宽度和高度设置为完全等于嵌入图像的像素大小。然后在ContainerDiv中，我只是将圆形按钮放置为位置：相对、宽度和高度，以我希望它们位于的位置的百分比表示。谢谢各位。但我喜欢ImageMapster上@SvabV提出的解决方案。Cheers+1这将很好地工作，只要你使用一个缩放良好的图像，并且位置不必精确到像素。这也适用于对div的小操作。基本上，我删除了container div中的image标记，并将container div本身的background image属性作为image。现在容器div附带了它的图像。接下来，我将容器div的宽度和高度设置为完全等于嵌入图像的像素大小。然后在ContainerDiv中，我只是将圆形按钮放置为位置：相对、宽度和高度，以我希望它们位于的位置的百分比表示。谢谢各位。但我喜欢ImageMapster上@SvabV提出的解决方案。CheeserAbsolute不尊重窗口，它相对于最近的父对象工作，位置不是静态相对的，绝对的，固定的。absolute不尊重窗口，它相对于最近的父对象工作，位置不是静态相对的，绝对的，固定的。我在JSFIDLE中尝试过它。请将窗口调整为一个小矩形，我确信它会消失。您还可以在JSFIDLE中左右移动这些条来查看它的行为。请将窗口调整为一个小矩形，我确信它会消失。您还可以在JSFIDLE中将这些条向左或向右移动，以查看其行为。谢谢！真棒，谢谢！非常好的洞察力。谢谢Justin，但是仅仅为了调整大小而重新计算50+点的位置是一种过火的行为。谢谢Justin，但是仅仅为了调整大小而重新计算50+点的位置是一种过火的行为。