图像顶部的 Div 移出图像上的正确位置

Question

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

问题： 当背景图像左对齐并且div元素具有“位置：绝对；左：x；顶部：y”时，它工作正常，但我的问题是当我尝试将图像居中对齐时，绝对x和绝对y div 不在他们必须在图像中的位置。 此外，当我更改窗口的大小时，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 在这里：

<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 坚持我希望它们成为的原始位置呢？

Answer 1

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

我知道图像映射被认为有点 Web 1.0，但我已经看到它们在这种情况下非常有效地使用，通过添加 JavaScript 和 JQuery 产生非常动态的结果。这篇JQuery文学作品很棒：ImageMapster

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

Answer 2

由于您知道背景图像的大小，因此很容易计算百分位偏移而不是绝对偏移。

假设您有一个 500x500 像素的图像作为背景，并且您希望将圆定位在 50x50 的位置。如果你把它放在left:50px;top:50px，即使父容器调整大小，图像也会保持在那个位置。然而，如果你把它放在left:10%;top:10% 它的偏移量将随着定位父级一起缩放。

Answer 3

因此，当您将其绝对定位时，它将停留在那里，并且当您的背景图像由于窗口大小调整而移动时，它将远离它的顶部。（实际上圆圈停留在它的 x ,y 位置，并且是移动的背景） 你的解决方案是和亲戚一起去。 我把你的代码放在 jsfiddle 中，相关的工作正常

在这里工作正常，不知道为什么你说它会在一段时间后消失？也许一些 JS 删除它？

Answer 4

您需要在页面调整大小和加载时添加一个重新计算 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>