如何让手机图片忽略#section-2的overflow规则溢出显示

只要设置了position为非static的父元素加了overflow: hidden，其内部所有子元素无论自身设置什么overflow属性，溢出父元素边界的部分都会被强制裁剪。你之前尝试给.circle外层套容器单独控制溢出没生效，就是因为外层#section-2已经设了overflow:hidden，子容器的overflow规则优先级被父级覆盖了。

二选一即可，优先推荐方案1，兼容性最好。

方案1：拆分裁剪容器，单独控制圆形背景的溢出（最稳妥） #

核心思路是把overflow:hidden从#section-2上移除，只给装圆形背景的独立容器加裁剪规则，手机元素不受裁剪规则影响：

• 删除#section-2样式里的overflow: hidden属性
• 调整DOM结构，把圆形背景元素单独放在一个专属裁剪容器内，给这个容器加和section一致的圆角、overflow:hidden，只负责裁剪圆形背景的超出部分
• 调高手机元素的z-index，避免被背景层遮挡

修改后的CSS代码：

#section-2 {
  background: blue;
  color: white;
  height: 50vh;
  border-radius: 0 10rem 0 10rem;
  position: relative;
  opacity: 0.9;
  /* 移除此处的overflow: hidden */
}

.box {
  display: flex;
  margin: 0 10rem;
  position: relative;
}

/* 圆形背景专属裁剪容器 */
.circle-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0 10rem 0 10rem; /* 和section圆角保持一致，裁剪边缘完全匹配 */
  z-index: 0;
}

.circle {
  background: url(/images/bg-pattern-circles.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 90rem;
  height: 90rem;
  position: absolute;
  top: -40rem;
  left: -18.5rem;
}

.phone {
  z-index: 10; /* 层级高于背景层，保证完整显示 */
  position: absolute;
  top: -5rem;
}

修改后的HTML结构：

<section id="section-2">
  <div class="box">
    <!-- 圆形背景单独放在裁剪容器内，裁剪规则不影响其他元素 -->
    <div class="circle-wrap">
      <div class="circle"></div>
    </div>
    <div class="phone">
      <img src="images/illustration-phones.svg" alt="Phones" />
    </div>
  </div>
</section>

方案2：用clip-path替代overflow:hidden（无需改动DOM） #

如果不想调整DOM结构，可以直接用CSS的clip-path属性实现section的边缘裁剪，代替overflow:hidden，这种裁剪方式不会影响内部溢出元素的正常显示：
只需要修改#section-2的样式，把原来的overflow: hidden替换为clip-path规则，同时调高手机元素的z-index即可，其余代码无需改动：

#section-2 {
  background: blue;
  color: white;
  height: 50vh;
  border-radius: 0 10rem 0 10rem;
  position: relative;
  opacity: 0.9;
  /* 替换overflow: hidden为下面的裁剪规则 */
  clip-path: inset(0 round 0 10rem 0 10rem);
}

.phone {
  z-index: 10;
  position: absolute;
  top: -5rem;
}

注意：该方案兼容所有现代浏览器，若需要兼容IE11及更早版本请选择方案1。

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