如何将图片叠加覆盖在div元素上定位层级边距尝试未达预期

云原生阿岚

2026-10-22

图片叠加在方形div上的实现修正方案

现有代码的核心问题点

定位关联逻辑偏差：为.square设置了position: relative作为定位参考，但<img>是和它同级的外部元素，仅靠margin-right: -100%做偏移，无法稳定对齐div的实际展示位置，很容易出现错位
样式语法错误：opacity: 0, 5使用了中文逗号做值分隔，浏览器无法识别该规则，会直接导致透明度设置失效
定位参数缺失：为<img>设置了position: absolute，但没有配套设置top/left等坐标属性，仅靠负边距调整的定位精度极差，不同视口下都会出现偏移
冗余属性无效：.square类中重复设置了两个width属性，虽然后者会覆盖前者生效，但属于无意义的冗余代码
全局规则冲突：body > *的全局最大尺寸规则，会让脱离文档流的图片在计算偏移时参考错误的尺寸基准，进一步加剧错位

可直接运行的实现代码

最符合定位逻辑的写法是将图片作为方形div的子元素，直接以父div为参考系实现叠加：

<div class="square">
  <img src="/images/100km.png" alt="100km bord">
</div>

body {
  margin: 0;
}

body>* {
  max-width: 250px;
  max-height: 250px;
}

video {
  max-height: 425px;
}

.square {
  width: 200px;
  height: 200px;
  background-color: blue;
  border: 10px dashed rgb(10, 241, 164);
  border-radius: 50px;
  position: relative;
  /* 新增flex属性实现内部图片居中叠加 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.square img {
  width: 66%;
  position: absolute;
  z-index: 1;
  opacity: 0.5; /* 修正原代码中逗号的语法错误 */
}