当屏幕大小改变时，如何将图像放置在另一图像的顶部，同时不让图像移动到其他位置

Question

我试着把灯泡放在平面图上方的固定位置，但是一旦我把平面图图像的位置属性设置为“相对的”，灯泡图像就不能超过平面图。

HTML：

<div>
    <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：

.background {
    size: 80%;
    position: relative;
    left: 8%;
    top: 40%
}

.br {
    position: relative;
    right: 15%;
    top: 85%;
}


.fy {
    position: absolute;
    right: 79.8%;
    top: 34%;
    transform: rotate(90deg)
}

.mr {
    position: absolute;
    right: 57.5%;
    top: 67.5%;
}

我的html页面

Answer 1

尝试overflow: visible; on .background和父div。同时，我也会在.br上使用绝对位置