如何让标记相对于cover模式的背景图实现绝对定位？

当然可行，你之前的代码问题出在父容器没有设置position: relative，导致绝对定位的标记是相对于整个浏览器视口定位，而非背景图所在的div。

修正后的代码 #

<div style="width:100%;height:100vh;position: relative; background-image: url('temp/bg.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;">
    <div style="position:absolute;top:82%;left:15%">Marker</div>
</div>

关键说明 #

• 给父级div加position: relative：这会让内部的绝对定位元素以父div为基准定位，而非整个视口。
• 百分比定位的逻辑：top和left的百分比是相对父div的尺寸，但因为背景图用了cover（保持自身宽高比填满容器），只要你计算的百分比是标记在原图中的相对位置（比如原图高度的82%、宽度的15%），不管屏幕怎么缩放，标记都会始终对准背景图上的固定区域。

内容的提问来源于stack exchange，提问作者Thomas