如何实现图片叠加且屏幕尺寸变化时位置固定？设置relative后灯泡图无法置于平面图上方

问题根源在于绝对定位的参考容器错误：当前使用position: absolute的灯泡，会以页面body（最近的非static定位父元素）为参考定位；而平面图设置position: relative后自身位置偏移，导致灯泡和平面图的位置完全脱节。

修正步骤： #

1. 给包裹平面图和灯泡的父<div>添加position: relative，让所有绝对定位的灯泡以这个div为基准容器
2. 调整平面图整体位置时，避免用position: relative的top/left（会打乱文档流），改用margin或transform实现偏移
3. 所有灯泡统一使用position: absolute，基于父div的坐标精准调整位置

修正后的代码示例： #

HTML

<div class="plan-container">
    <img src="floorplanff.jpeg" class="background" width="1200px" height="600px">
    <img id="lightbulbbr" src="pic_bulboff.gif" width="45px" height="70px" class="br" >
    <img id="lightbulbfy" src="pic_bulboff.gif" width="45" height="70" class="fy" >
    <img id="lightbulbmr" src="pic_bulboff.gif" width="45" height="70" class="mr" >
    <img id="lightbulbt" src="pic_bulboff.gif" width="30" height="50" class="t" >
    <img id="lightbulbfmngr" src="pic_bulboff.gif" width="45" height="70" class="mngr" >
    <img id="lightbulbar" src="pic_bulboff.gif" width="35" height="65" class="ar" >
</div>

CSS

.plan-container {
    position: relative; /* 作为内部绝对定位元素的参考容器 */
    width: 1200px; /* 和平面图宽度一致，确保定位范围匹配 */
    margin: 40% auto 0; /* 用margin代替position的top属性调整整体垂直位置 */
    transform: translateX(8%); /* 实现原left:8%的水平偏移效果 */
}

.background {
    width: 100%; /* 让图片占满容器宽度，保持比例 */
    height: auto;
    /* 去掉原position: relative，避免干扰内部元素定位 */
}

.br {
    position: absolute; /* 统一使用绝对定位 */
    right: 15%;
    bottom: 15%; /* 相对于容器底部定位，比top更稳定 */
}

.fy {
    position: absolute;
    left: 20.2%; /* 等价于原right:79.8%，改为相对左侧定位更直观 */
    top: 34%;
    transform: rotate(90deg);
}

.mr {
    position: absolute;
    left: 42.5%; /* 等价于原right:57.5% */
    top: 67.5%;
}

关键说明： #

• 父容器的position: relative是核心，它会把内部绝对定位元素的坐标锚定在自身范围内，无论容器整体怎么移动，灯泡都会跟着平面图走
• 用margin和transform调整容器位置，不会破坏内部元素的定位参考体系
• 灯泡的定位尽量使用相对于容器的left/right/bottom/top，确保和平面图的相对位置始终准确

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