通过将 popper 的锚元素（如按钮）设为 `position: fixed`，可使其脱离文档流、固定于视口指定位置，从而确保 popper 在页面滚动或 appbar 隐藏时仍始终可见。
在使用 MUI <Popper> 构建聊天机器人浮层时，一个常见痛点是：当 Popper 锚定在顶部 AppBar 中的按钮上，用户向下滚动导致 AppBar 隐藏后，Popper 会随之移出视口甚至被裁剪——即使启用了 preventOverflow 等修饰器，也无法解决“锚元素本身已不可见”这一根本问题。
关键在于：Popper 的定位依赖于 anchorEl 的位置。若锚元素随滚动消失（例如 AppBar 使用 position: sticky 或 transform 隐藏），Popper 就失去了稳定参照系。因此，正确解法不是优化 Popper 修饰器，而是让锚元素自身具备视口级固定性。
✅ 推荐方案：将触发按钮设为 position: fixed
如下所示，直接将 <IconButton>（或其他触发按钮）通过 sx 设置为固定定位，并指定 bottom 和 right 偏移量，使其常驻于视口右下角（类似主流聊天小窗）：
<IconButton
onClick={handleClick}
ref={popperRef}
sx={{
position: "fixed",
bottom: 16,
right: 16,
zIndex: (theme) => theme.zIndex.modal + 1, // 确保高于其他内容
}}
>
<ChatIcon />
</IconButton>
<Popper
open={open}
anchorEl={popperRef.current}
placement="top-end"
modifiers={[
{
name: "offset",
options: {
offset: [0, 8], // 弹出层与按钮间留白
},
},
]}
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={300}>
<Paper sx={{ p: 2, maxWidth: 360, borderRadius: 2, boxShadow: 3 }}>
<Typography variant="h6" gutterBottom>? Chat Assistant</Typography>
<Box sx={{ height: 240, overflow: "auto", mb: 1 }}>
{/* 聊天消息列表 */}
</Box>
<TextField
fullWidth
size="small"
placeholder="Type a message..."
onKeyDown={(e) => e.key === "Enter" && handleSend()}
/>
</Paper>
</Fade>
)}
</Popper>⚠️ 注意事项：
- 避免 anchorEl 为 null：确保 popperRef.current 在 Popper 渲染时有效（推荐使用 useRef + useEffect 或条件渲染 anchorEl && <Popper />）；
- z-index 控制：固定按钮和 Popper 需设置足够高的 zIndex（建议 ≥ theme.zIndex.modal），防止被 AppBar、Drawer 等遮挡；
- 响应式适配：在移动端可调整 bottom/right 值（如用 sx={{ bottom: { xs: 12, md: 16 } }}）；
- 无障碍支持：为固定按钮添加 aria-label="Open chat"，Popper 区域添加 role="dialog" 和 aria-modal="true"。
? 总结：preventOverflow 仅解决 Popper 自身溢出问题，无法挽救“锚点消失”。真正可靠的方案是让锚元素成为视口级固定节点——这既是语义清晰的设计，也是性能更优（无需监听 scroll 重计算）的实现方式。
