CSS HTML img位置绝对

Question

确定， 所以我制作了一个交互式地图，当用户用鼠标移动一个或红点时，他们会得到一个小信息屏幕。

但是当屏幕较小的人查看网页时，它会稍微滑动： 例如：

此屏幕截图显示了它的外观：

屏幕最小化

正如你所看到的，绿色和红色的点不合适，我想防止这种情况发生。

代码：

<div style="position: relative; left: 0; top: 0;">
    <img src="images/overhead.png" width="1000" height="1000" style="position: relative; top: 0; left: 0;"/>
    <img src="images/taken.png" class="masterTooltip" height="18" width="18" title="This house is owned by:&nbsp;<?php echo $owner ?>" style="position: absolute; top: 400px; left: 960px;"/>
</div>

记住，这个：

<img src="images/taken.png" class="masterTooltip" height="18" width="18" title="This house is owned by:&nbsp;<?php echo $owner ?>" style="position: absolute; top: 400px; left: 960px;"/>

地图中是否有一个点。 谢谢你的帮助。

Answer 1

这里有两个解决方案，要么为容器元素指定静态width，要么需要使用%。

Demo （已修复width包装元素）

此外，您可能还想查看<map>标记。

Answer 2

您可以使用百分比添加css中的图像大小。
例如，如果你添加

height:100%;
width:100%;

当屏幕变小或变大时，您的图像在屏幕上的宽度和高度均为100％。