如何利用z-index使图片置于背景边框内且覆盖背景？

问题核心是你当前的结构里，背景图本身用了position: relative，没法裁剪超出的人物元素。要实现「人物覆盖背景但不超出边框」，需要加个父容器来控制裁剪范围，同时调整定位和层级：

1. 修改HTML结构 #

给两张图新增一个父容器，用来限定裁剪边界：

<div class="container">
  <img class="background" src="">
  <img class="bubble_img" src="">
</div>

2. 调整CSS代码 #

.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 关键：裁掉超出容器的人物部分 */
}

.background {
  width: 100%;
  height: 100%;
  display: block;
  /* 移除原来的position: relative和z-index，不需要它建立独立堆叠上下文 */
}

.bubble_img {
  bottom: 0;
  max-height: 110%;
  position: absolute;
  right: 0;
  transition: all 1s;
  z-index: 1; /* 确保人物图在背景图上方 */
}

为什么这样改？ #

原来的背景图用position: relative会创建独立堆叠上下文，要么人物层级比背景低被挡住，要么层级高但背景图没法裁剪超出部分。加了父容器后：

• 父容器的overflow: hidden会自动裁剪所有超出它边界的子元素
• 人物图相对父容器定位，z-index设为1就能稳稳覆盖在背景上，同时不会超出边框范围

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