Question

我遇到了以下问题。我想在网站上显示地图。地图是背景图片。

本规范使图像完全负责。

section#map {
    max-width: 960px;   
}

div#map-image {
    background: url(Map.jpg) top left no-repeat;
    background-size: 100%;
    padding-top: 41.875%; /* 402px/960px = 0.41875 height/width of map */
}

到目前为止一切顺利！

但现在我希望在地图上有某种定位引脚，它的行为也很敏感。因为我想要动画它我没有包含在地图图形中，所以这是表格。

这可能吗？

使用position:relative;不起作用，因为父元素没有指定宽度/高度。保证金/押金也不起作用。

定位销的样式：

span#location 
{
    background-color: red;
    width: 12px;
    height: 12px;
    border-radius: 6px;

    /*position: relative;
    top: 86.9%;
    left: 52.26%;*/
}

html看起来像这样：

<section id="map">  
    <span id="location"></span>
    <div id="map-image"></div>
</section>

任何想法如何解决这个问题？

Answer 1

将position: relative添加到#map地图的宽度似乎是其父级的100％。然后引脚的position:relative应该有效。

除非您将地图设置为position：relative，否则<section id="map">中的任何相对或绝对定位元素将从<body>

中获取其相对位置

Answer 2

无法测试它，因为我没有地图图像，但这似乎有效：

position: absolute;

jsfiddle

将元素放置在空容器上

2 个答案: