Question

我有一个div放在背景图像上。 div是可解决的，因此它带来一个弹出对话框。背景图像上有圆点，将放置div圆圈。

问题：当背景图像左对齐并且div元素具有“position：absolute; left：x; top：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圆圈位于图像顶部的固定位置，无论窗口大小或页面嵌入图像或任何调整大小活动的位置。

我想要的是什么：

What I wanted:

div如何移出它的初始位置： enter image description here

最后，即使“相对”定位div也消失了，我慢慢收缩窗口大小:(

enter image description here

据我所知，“绝对”定位是相对于窗口的绝对位置，但为什么我如何让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>

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

4 个答案: