如何用Material UI(v5)实现两个容器组件的重叠布局？

针对你的需求，这里提供两种符合MUI规范的优雅实现方式，基于MUI原生组件完成，避免手写冗余原生CSS：

方法一：绝对定位实现完全重叠 #

适合需要两个容器完全覆盖的场景，核心是利用定位属性，通过父容器提供定位上下文，子容器绝对定位铺满父容器。

推荐用Box作为布局容器（Container主打响应式页面宽度控制，Box更适配自定义定位类需求），代码示例：

import { Box } from '@mui/material';

function FullOverlapExample() {
  return (
    {/* 父容器：设置相对定位作为定位基准，指定宽高（也可由内容撑开） */}
    <Box sx={{ position: 'relative', width: '100%', height: '400px' }}>
      {/* 第一个子容器：绝对定位铺满父容器 */}
      <Box sx={{ position: 'absolute', inset: 0 }}>
        <SomeMediaItem1 />
      </Box>
      {/* 第二个子容器：同样绝对定位铺满，层级由媒体组件内部z-index控制 */}
      <Box sx={{ position: 'absolute', inset: 0 }}>
        <SomeMediaItem2 />
      </Box>
    </Box>
  );
}

• inset: 0是MUI简写，等价于top: 0, right: 0, bottom: 0, left: 0，快速让子容器铺满父容器。
• 若需偏移显示，修改top/left等值即可，比如<Box sx={{ position: 'absolute', top: 20, left: 20, inset: 'auto' }}>。

方法二：负边距实现部分重叠 #

如果只需要两个容器部分重叠（比如第二个容器向上覆盖第一个的底部区域），可以用Stack结合负边距实现，代码示例：

import { Stack, Box } from '@mui/material';

function PartialOverlapExample() {
  return (
    {/* Stack垂直排列子元素，spacing设为0消除默认间距 */}
    <Stack spacing={0}>
      <Box sx={{ height: '400px' }}>
        <SomeMediaItem1 />
      </Box>
      {/* 第二个容器：向上偏移100px实现重叠，relative确保z-index生效 */}
      <Box sx={{ marginTop: '-100px', position: 'relative', zIndex: 1 }}>
        <SomeMediaItem2 />
      </Box>
    </Stack>
  );
}

• 负marginTop让第二个容器上移，覆盖第一个容器的底部区域，调整数值可控制重叠范围。
• 若媒体组件未处理层级，可通过z-index手动指定显示顺序。

关于使用Container的说明 #

如果坚持要用Container作为子容器，只需给Container添加对应定位样式即可，比如：

<Box sx={{ position: 'relative', width: '100%', height: '400px' }}>
  <Container sx={{ position: 'absolute', inset: 0 }}>
    <SomeMediaItem1 />
  </Container>
  <Container sx={{ position: 'absolute', inset: 0 }}>
    <SomeMediaItem2 />
  </Container>
</Box>

注意：Container自带水平内边距和响应式最大宽度，若不需要这些特性，用Box会更灵活。

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