如何使用CSS叠放两张图片并保持相对位置 使其视觉上如同单张图片

完全可以仅通过CSS实现该需求，你现有方案错位的核心原因有两点：

• 容器使用固定高度height:200px搭配宽度100%，宽高比会随窗口尺寸动态变化，而背景图设置了background-size: cover，会自动裁切图片保证填满容器，裁切范围/位置不固定，导致百分比坐标对应实际位置偏移
• 红点的尺寸、位置百分比是相对于容器计算，而非实际显示的背景图尺寸，容器比例变化时红点和背景图的比例关系也会改变，自然出现错位

正确实现方案 #

核心逻辑是强制容器的宽高比和背景图原始宽高比完全一致，保证背景图始终无裁切、不变形完整填充容器，此时所有百分比参数都会和背景图尺寸严格对应。
推荐使用aspect-ratio属性实现（现代浏览器兼容性极佳），修正后的代码如下：

<style>
.container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  /* 替换为你的背景图原始宽高比，示例中的狗狗图为16:9 */
  aspect-ratio: 16/9;
}
.myDiv {
  height: 100%;
  width: 100%;
  background-image: url('https://toppng.com/uploads/preview/red-dot-icon-png-bowling-ball-transparent-background-11562953794gu3xfby6c8.png'), url('https://image.freepik.com/free-photo/selective-focus-shot-adorable-kooikerhondje-dog-field_181624-29383.jpg');
  /* 红点尺寸按背景图比例设置，背景图填满容器无变形 */
  background-size: 5% auto, 100% 100%;
  background-repeat: no-repeat;
  /* 第一个参数为红点坐标：你需要先在原图中测量目标点的位置，x坐标/原图宽度=水平百分比，y坐标/原图高度=垂直百分比，示例中狗狗左耳坐标约为42% 31% */
  /* 第二个参数为背景图对齐基准，保持left top即可 */
  background-position: 42% 31%, left top;
}
</style>
<div class="container">
  <div class="myDiv"></div>
</div>

老浏览器兼容方案 #

如果需要兼容不支持aspect-ratio的旧版浏览器，可以用padding百分比hack固定容器比例：

.container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  /* 16:9比例对应的padding-top值 = 9/16*100% = 56.25%，可按你的图片比例换算 */
  padding-top: 56.25%;
  height: 0;
}

双img标签实现方案 #

如果觉得多背景调整坐标不直观，也可以用两个img标签叠加实现，逻辑更清晰：

<style>
.container {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
}
.bg-img {
  width: 100%;
  height: 100%;
  display: block;
}
.dot-img {
  position: absolute;
  /* 红点尺寸 */
  width: 5%;
  height: auto;
  /* 目标点坐标百分比 */
  left: 42%;
  top: 31%;
  /* 可选：让红点中心对准目标坐标，不需要可删除 */
  transform: translate(-50%, -50%);
}
</style>
<div class="container">
  <img src="狗狗图地址" alt="狗狗" class="bg-img">
  <img src="红点图地址" alt="标记点" class="dot-img">
</div>

按以上方案实现后，无论窗口如何缩放，标记点都会和背景图保持固定相对位置，视觉上完全是一张完整图片。

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