如何将MUI Snackbar相对于父div而非整个页面进行对齐？

要让Snackbar相对于触发它的父div居中，核心是修改Snackbar的定位规则——默认Snackbar使用fixed定位（相对于视口），我们需要将其改为absolute定位并依托父容器的相对定位来实现。具体实现步骤如下：

1. 给父容器设置相对定位
   确保触发Snackbar的父div添加position: relative属性，这样内部的绝对定位元素会以该父容器为基准：

<div style={{ position: 'relative', width: '400px', height: '300px', border: '1px solid #ccc' }}>
  {/* 触发按钮或其他业务内容 */}
  <Button onClick={handleOpen}>触发提示</Button>
  {/* 将Snackbar嵌套在这个父容器内 */}
  <Snackbar 
    open={open} 
    autoHideDuration={5000} 
    onClose={handleClose}
    sx={{
      position: 'absolute', // 替换默认的fixed定位
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)', // 实现水平垂直居中
      width: 'fit-content', // 让Snackbar宽度自适应内容
    }}
  >
    <Alert
      severity={severity}
      variant="filled"
      sx={{ width: '100%' }}
    >
      {message}
    </Alert>
  </Snackbar>
</div>

2. 调整Snackbar的定位参数

• 通过sx配置将position设为absolute，脱离视口定位逻辑，转而依赖父容器的相对定位。
• 利用top: 50%、left: 50%配合transform: translate(-50%, -50%)，实现相对于父容器的完美居中，这种方式适配任意尺寸的父容器和Snackbar内容。

3. 可选：适配底部居中需求
   如果需要类似原页面底部居中的效果，但改为相对于父容器底部居中，可以调整定位参数：

sx={{
  position: 'absolute',
  bottom: '16px',
  left: '50%',
  transform: 'translateX(-50%)',
  width: 'fit-content',
}}

关键注意事项：父容器必须设置position: relative，否则Snackbar的absolute定位会向上寻找最近的带定位属性的祖先元素（若无则仍相对于视口），无法实现相对于目标父div的定位效果。

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