如何在带导航栏与logo的背景图上用HTML精准叠加堆叠图片

你的实现偏差本质是浮层定位的边距计算逻辑、尺寸比例完全没匹配参考样式的错位关系：

• margin-right: -100% 的计算基准是父容器的整体宽度，会直接让顶部图片的右边沿和父容器的右边沿完全对齐，两张图的左边沿彻底重叠，根本留不出右下侧图片露出的错位空间，自然和预期的叠层效果脱节。
• 两张图的宽度比例没有做适配：底部图占75%宽度靠右时，顶部图占66%宽度靠左的设定，在全量负边距的作用下，会直接把顶部图完全压在底部图的左半区，没有露出底部图的右侧、下侧的留白边。
• 随意设置的 padding-top: 15% 没有和图片本身的宽高比例绑定，撑出来的容器高度和图片实际比例不匹配，进一步放大错位。

1. 给堆叠容器补全相对定位基准，避免浮层元素脱离文档流后出现定位偏移
2. 调整负边距数值，匹配预期的错位距离，不要用100%的全量负边距
3. 用 aspect-ratio 替换随意设置的 padding-top，锁死图片展示比例，消除比例变形
4. 显式给两个堆叠元素设z-index，避免默认文档流堆叠顺序出错

修正后的代码参考：

/* 堆叠容器基础样式 */
.image-stack {
  position: relative;
}
/* 清浮动 */
.image-stack::after {
  content: ' ';
  display: table;
  clear: both;
}
/* 底层图片 */
.image-stack__item--bottom {
  float: right;
  width: 75%;
  aspect-ratio: 4/3; /* 替换原padding-top的比例支撑逻辑 */
  z-index: 0;
}
/* 顶层重叠图片 */
.image-stack__item--top {
  float: left;
  width: 66%;
  /* 替换原-100%的边距，计算后匹配错位距离，让图片叠在底层图的左半区，露出底层图右下侧 */
  margin-right: -62%;
  aspect-ratio: 4/3;
  position: relative;
  z-index: 1;
}

你可以根据实际的错位展示需求，微调 margin-right 的数值：负边距的绝对值越小，顶层图片越往左侧偏移，露出的底层图片的右下区域就越大。

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