如何解决Antd Drawer标题内悬浮floating icon超出模态框被裁剪问题

你遇到的元素超出边界被裁剪的问题和z-index配置无关，核心原因有两个：

1. z-index只负责同层叠上下文内的元素前后堆叠顺序，无法绕过父容器的overflow裁切规则，所以你之前调整z-index的操作不会生效
2. Antd Drawer的两个默认容器样式做了溢出限制：

• 头部容器.ant-drawer-header默认设置了overflow: hidden，超出头部范围的内容会被直接裁切
• 内容根容器.ant-drawer-content默认设置了overflow: auto，超出整个Drawer主体范围的内容也会被裁切

给Drawer添加自定义类名避免全局样式污染，再覆盖对应容器的overflow属性即可：

1. 给Drawer组件添加className属性：

<Drawer
  className="custom-drawer"
  title={
    <div>
      {/* 你的标题和悬浮icon代码 */}
    </div>
  }
  {/* 其他原有配置项保持不变 */}
>
  {/* 抽屉内容 */}
</Drawer>

2. 添加对应覆盖样式：

/* 解除头部的溢出裁切限制 */
.custom-drawer .ant-drawer-header {
  overflow: visible;
}
/* 如果你的悬浮icon需要飘出整个Drawer主体范围，额外加这行 */
.custom-drawer .ant-drawer-content {
  overflow: visible;
}

如果你的项目用了scoped样式（Vue）或CSS Module，记得使用对应框架的深度选择器命中Antd内置类名：

• Vue环境下写为::v-deep .custom-drawer .ant-drawer-header
• React CSS Module环境下把类名包裹在:global()中即可

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