在图像地图上显示 div 的可点击图像地图，如果我添加更多 HTML，位置就会出错

Question

我有一个 clickabe 图像映射，当我点击时，它会在图像映射上显示 div（带有 html X1 或 X2）。 divs 应始终位于图像上方的同一位置，但现在如果我在 html 的顶部添加换行符，它们会发生变化。那是不正确的

如果我取消注释 fiddle 示例中的第一行（3 个换行符）

      <!-- <br /><br /><br /> -->

X1 和 X2 会改变位置，我希望它们在同一位置，即使我有 3-4 个换行符或更改网络浏览器的大小或其他东西！

要显示 X1 和 X2，请点击 X1 的左上角和向下 40px 的 X2

我无法让它工作，任何tip/solution？

http://jsfiddle.net/yvsy3ox1/1/

Answer 1

如果我理解正确，那么你需要将position:absolute;添加到你的div然后尝试定位它。

Answer 2

绝对定位元素将相对于设置了位置的第一个父元素定位自己（除默认 static 之外的任何元素）

因此，您需要做的就是为包含图像和 X 的 div 设置一个位置：

<div class="container">
    <img src="http://images.apple.com/v/iphone-6/a/images/overview/design_details_left_large.jpg" usemap="#foo" />
    <div id="divcar1" class="divcar1">x1</div>
    <div id="divcar2" class="divcar2">x2</div>
</div>

.container{
    position:relative;
}

Answer 3

知道了。您的容器 div 必须具有相对定位：

.container {
    position:relative;
}

<div class="container">
    <img src="http://images.apple.com/v/iphone-6/a/images/overview/design_details_left_large.jpg" usemap="#foo"/>

    <div id="divcar1" class="divcar1">x1</div>
    <div id="divcar2" class="divcar2">x2</div>
</div>

http://jsfiddle.net/Ld6t9eka/

在图像地图上显示 div 的可点击图像地图，如果我添加更多 HTML，位置就会出错

clickabe imagemap who show div over the imagemap, the position gets wrong if I add more HTML

css

css-float