调整浏览器窗口时父DIV内子DIV错位问题求助

这问题我太熟了——你现在的核心问题是子元素用了固定像素的绝对定位，但父容器是随窗口尺寸缩放的，两者的比例没对齐，窗口一变子元素自然就跑偏了。给你几个实用的解决思路：

方法1：用百分比定位替代固定像素 #

把top和left的固定像素值换成相对于父容器的百分比，这样子元素会跟着父容器的缩放比例同步调整位置。

首先你得知道背景图的原始尺寸（比如假设你的boiler_room_schema.jpeg原始宽是1920px，高是1000px），然后计算百分比：

• 原始top是305px → 305 / 1000 * 100% = 30.5%
• 原始left是960px → 960 / 1920 * 100% = 50%

修改后的CSS：

.boiler_room {
  position: absolute;
  background-image:url('boiler_room_schema.jpeg');
  background-size: contain;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}
.HVAC_PUMP_01_STS {
  position: absolute;
  z-index: 10;
  top: 30.5%; /* 替换成计算后的百分比 */
  left: 50%; /* 替换成计算后的百分比 */
}

方法2：结合transform实现精准对齐 #

如果子元素自身有宽高，用transform: translate()可以让它的中心点（或者任意位置）精准对准背景图上的目标点，避免因为元素自身尺寸导致的偏移：

.HVAC_PUMP_01_STS {
  position: absolute;
  z-index: 10;
  top: 30.5%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让元素中心对准定位坐标 */
}

方法3：给父容器固定宽高比（推荐） #

如果背景图有固定的宽高比，给父容器加padding-top来维持这个比例，能避免background-size: contain导致的留白问题，同时让百分比定位更稳定：

假设你的背景图是16:9的比例，那padding-top: 56.25%（9/16*100%），修改父容器的CSS：

.boiler_room {
  position: relative; /* 改成relative，确保子元素相对于它定位 */
  width: 100%;
  padding-top: 56.25%; /* 根据背景图实际比例调整 */
  background-image:url('boiler_room_schema.jpeg');
  background-size: cover; /* 或者contain，按需选择 */
  background-repeat: no-repeat;
  background-position: center;
}

为什么原来的代码会错位？ #

你给父容器设置了position: absolute和width:100%;height:100%，它会随窗口尺寸拉伸/收缩，但子元素的top:305px;left:960px是固定的像素值——相当于在一张缩放的地图上，标记点的坐标还是原始地图的像素位置，窗口一缩，标记点当然就不在原来的位置了。

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