React中如何实现图片叠加且不导致其他组件位置下移？

可以实现，核心思路是让新增的纸飞机图片脱离正常文档流，不会对原有居中内容的布局产生挤压，以下是两种可行的实现方案：

将纸飞机图片设置为绝对定位，锚定在原有居中内容的左外侧，完全不修改原有内容的样式和结构：

// 页面组件代码
const HomePage = () => {
  return (
    <div className="home-container">
      {/* 原有居中内容容器 */}
      <div className="center-content">
        {/* 新增纸飞机图片 */}
        <img src="你的纸飞机图片地址" alt="纸飞机" className="left-plane" />
        {/* 此处保留所有原有内容，完全不需要修改 */}
        <div>原有居中的所有内容</div>
      </div>
    </div>
  )
}

/* 样式代码 */
.center-content {
  /* 原有居中的样式完全保留，仅新增下面1行 */
  position: relative;
  /* 示例原有样式，不需要修改：
  width: 1200px;
  margin: 0 auto;
  */
}

.left-plane {
  position: absolute;
  /* 20px为纸飞机和内容的间距，可自定义调整 */
  right: calc(100% + 20px);
  /* 垂直居中对齐，不需要的话可自行调整top数值 */
  top: 50%;
  transform: translateY(-50%);
  /* 自定义图片尺寸 */
  width: 100px;
  /* 可选：防止被其他元素遮挡 */
  z-index: 10;
}

如果需要纸飞机贴紧屏幕最左侧，只需要将.left-plane中的right: calc(100% + 20px)替换为left: 0即可。

不需要修改原有Ant Design组件的属性和逻辑，仅给承载居中内容的Ant Design组件新增相对定位样式即可，示例如下：

import { Card } from 'antd';

const HomePage = () => {
  return (
    <div className="home-container">
      {/* 原有Ant Design组件，所有原有props保持不变，仅新增position样式 */}
      <Card style={{ width: 1200, margin: '0 auto', position: 'relative' }}>
        <img
          src="你的纸飞机图片地址"
          alt="纸飞机"
          style={{
            position: 'absolute',
            right: 'calc(100% + 20px)',
            top: '50%',
            transform: 'translateY(-50%)',
            width: 100
          }}
        />
        {/* 原有Card内的所有内容完全不变 */}
        原有内容
      </Card>
    </div>
  )
}

移动端适配可额外添加媒体查询，小屏幕下自动隐藏纸飞机避免挤占空间：

@media (max-width: 1300px) {
  .left-plane {
    display: none;
  }
}

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