如何实现React组件中指定图片溢出容器，另一张图片被裁剪的布局效果

嘿，我来帮你搞定这个布局难题！你现在的核心需求很明确：让背景的圆形图乖乖待在带圆角的容器内（被裁剪），但手机图要能突破容器边界完整显示对吧？之前你设置overflow: hidden导致手机图也被裁掉，用position: absolute没生效的问题，其实是包含块和overflow作用范围的锅，咱们一步步调整就能解决：

问题根源 #

你给.infr加了overflow: hidden，这个属性会裁剪所有属于该容器的子元素——哪怕是position: absolute的元素，只要它的包含块是.infr（因为.infr设了position: relative），就逃不过被裁剪的命运。所以要让手机图不被裁，就得让它脱离这个overflow: hidden的管辖范围。

具体解决方案 #

1. 调整React组件结构

给.infr套一个父容器（比如叫.infr-container），把手机图移到这个父容器里，和.infr同级。这样.infr的overflow: hidden只会管自己的子元素（背景圆图），手机图就自由了：

export default function Infr() {
  return (
    <div className="infr-container">
      <div className="infr">
        <img src="/images/bg-pattern-circles.svg" className="infr__bg" />
        <div className="infr__items">
          <div className="items__details">
            <h3>State of the Art Infrastructure</h3>
            <p>
              With reliability and speed in mind, worldwide data centers provide the backbone for ultra-fast connectivity. This ensures your site will load instantly, no matter where your readers are, keeping your site competitive.
            </p>
          </div>
        </div>
      </div>
      {/* 把手机图移到外层容器，和.infr同级 */}
      <img src="/images/illustration-phones.svg" className="phones" />
    </div>
  );
}

2. 修改CSS样式

• 给外层父容器设置定位和高度，作为手机图的定位参考：

.infr-container {
  position: relative; /* 作为手机图absolute定位的包含块 */
  height: 20rem; /* 和原来.infr的高度一致，保证布局对齐 */
  width: 100%; /* 或者根据设计需求设置宽度 */
  margin: 0 auto; /* 可选，需要居中的话添加 */
}

• 调整.infr的样式，让它继承父容器高度，同时调整层级确保手机图能显示在上方：

.infr {
  height: 100%; /* 改为100%，继承父容器高度 */
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to left, var(--black), var(--deep-blue));
  position: relative;
  border-radius: 0 100px 0 100px;
  z-index: 0; /* 调整层级，让手机图能在它上方显示 */
  color: white;
  overflow: hidden; /* 保留这个，专门裁剪背景圆图 */
}

• 给手机图设置绝对定位，调整位置并确保层级在.infr之上：

.phones {
  position: absolute;
  /* 根据你的设计需求调整位置，下面是示例值，可根据实际图片大小微调 */
  left: 20%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1; /* 确保手机图在.infr上方 */
  /* 不需要overflow: visible，因为父容器没有overflow: hidden */
}

• 保留原来的.infr__bg样式不变，它作为.infr的子元素，会被.infr的overflow: hidden正确裁剪，完美契合背景圆图的需求：

.infr__bg {
  position: absolute;
  transform: translate(-25rem, -10rem);
  z-index: -1;
}

为什么之前的尝试没生效？ #

你之前给手机图加position: absolute时，因为.infr是position: relative，所以手机图的包含块是.infr——也就是说，.infr的overflow: hidden依然会对它生效，自然会被裁剪。现在把手机图移到外层容器后，它的包含块变成了没有overflow: hidden的.infr-container，所以就能突破边界显示啦！

你可以根据实际图片的尺寸和设计需求，微调.phones的left、transform等值，直到达到你想要的溢出效果~

内容来源于stack exchange