CSS元素部分层叠实现咨询：手机图片跨橙色背景的解决方案

要让手机图片顶部在橙色背景外、底部在背景内，不用纠结z-index的层级限制，用以下两种方法就能实现：

方法一：拆分背景容器（兼容性最优） #

这是最稳妥的方案，适配所有现代浏览器：

• 把橙色背景拆成上半段和下半段两个独立容器
• 让手机图片定位在两个背景的中间位置
• 给下方背景设置更高的z-index，让它盖住手机下半部分；上方背景z-index低于手机，让手机顶部自然露出

代码示例：

<div class="page-container">
  <div class="bg-top"></div>
  <img src="你的手机图片路径" alt="手机" class="phone">
  <div class="bg-bottom"></div>
</div>

.page-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.bg-top, .bg-bottom {
  position: absolute;
  width: 100%;
  background: #ff7a00; /* 橙色背景色 */
}

.bg-top {
  top: 0;
  height: 40vh; /* 上背景高度，根据设计调整 */
  z-index: 1;
}

.bg-bottom {
  top: 40vh;
  height: 60vh; /* 下背景高度 */
  z-index: 3;
}

.phone {
  position: absolute;
  top: 25vh; /* 调整位置让顶部露出上背景外 */
  left: 50%;
  transform: translateX(-50%);
  width: 200px; /* 手机图片宽度，按需调整 */
  z-index: 2;
}

方法二：用CSS clip-path 裁剪背景（代码更简洁） #

如果项目无需兼容旧浏览器（如IE），这种方法更省事：

• 给完整的橙色背景容器设置clip-path，裁剪掉顶部区域，只保留需要覆盖手机下半部分的区域
• 让手机图片层级低于背景，未被裁剪的背景区域就会自动盖住手机底部

代码示例：

<div class="page-container">
  <img src="你的手机图片路径" alt="手机" class="phone">
  <div class="bg-full"></div>
</div>

.page-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.bg-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #ff7a00;
  /* 裁剪掉顶部40vh的区域，只保留下方部分 */
  clip-path: inset(40vh 0 0 0);
  z-index: 2;
}

.phone {
  position: absolute;
  top: 25vh;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  z-index: 1;
}

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