html - Div 放置在 fullscreen-img 之上并相对于 fullscreen-img

Question

如何相对于全屏 img 在 和 上放置一个 div？即使调整窗口大小时，我也希望 div 相对于图像位于同一位置。

编辑:

现在几乎可以正常工作了。我将我的 div 定位到外部 div 而不是图像。问题是外部 div 需要有一个指定的大小(% 或 px)，否则 relative-div 将不知道放在哪里。当我在外部 div 上使用 100% x 100% 时，它与图像的高度不同。该图像是全屏的，并且在调整窗口大小时应该可以正常工作。

<div id="outer-div" style="position:absolute; width:100%; height:100%;">
    <img  id="fullscreen-image" src="image.jpg" style="width:100%;">
    <div id="relative-div" style="position:relative; background-color:#000; bottom:20%; left:50%; width:30px; height:30px;"></div>
</div>

Answer 1

这在使用 absolute 时有效定位 -

请检查 fiddle - https://jsfiddle.net/afelixj/5rjgetq0/1/

如果 img 这将起作用不是 absolute , 但应该有一个 position:relative 的 warapping div找到 top和 left图片的位置。