调整浏览器窗口大小时，DIV内的DIV放错了位置

Question

我有一个网页，其中我有一个父DIV，然后有多个子DIV。 父DIV有背景图像，我让它可调整大小，但问题是，当我调整网页大小时，所有子DIV都放错了地方。

有没有办法解决这个问题？

HTML

<div class="boiler_room">
    <div class="HVAC_PUMP_01_STS">ON</div>
</div>

CSS

.boiler_room {
    position: absolute;
    background-image:url('boiler_room_schema.jpeg');
    background-size: contain;
    object-fit: contain;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

.HVAC_PUMP_01_STS {
    position: absolute;
    z-index: 10;
    top: 305px;
    left: 960px;
}