当父级设置 overflow: hidden 且为定位元素的包含块时，绝对/固定定位子元素会被裁剪；解决方法包括将子元素移至 body 下、改用 display: flow-root 或调整定位层级。
父级元素设置了 overflow: hidden（或 auto、scroll）时，子元素即使使用 position: absolute 或 fixed，超出父容器边界的部分也会被裁剪——这不是 bug，是 CSS 规范行为。关键在于：**定位元素的包含块（containing block）是否受父级 overflow 限制**。
确认定位元素的包含块
绝对定位元素的包含块，通常由最近的具有 position: relative/absolute/fixed 的祖先元素决定。如果这个祖先设置了 overflow: hidden，且自身不是根元素（<html>），那么它就会成为裁剪边界。
- 检查该父级是否设置了
position: relative（常见于布局容器）+overflow: hidden - 用浏览器开发者工具高亮该父级，观察其尺寸和 overflow 状态（在 Styles 面板中搜
overflow） - 临时删掉父级的
overflow值，看子元素是否“恢复显示”——这是最直接的验证方式
常用解决方法（按推荐顺序）
优先选择语义清晰、影响最小的方案：
-
把定位元素移出有 overflow 的父级：将弹层、下拉菜单、Tooltip 等浮动类元素，直接挂载到
<body>下（如用 React Portal、Vue Teleport），彻底脱离裁剪上下文 -
解除父级的 overflow 限制：若父级仅因清除浮动或 flex 布局需要
overflow: hidden，可改用display: flow-root（现代写法）或伪元素清除浮动，避免副作用 -
提升父级的定位层级：给该父级加
position: static（默认值），并确保其上一级有定位且无 overflow；或让真正需要裁剪的容器更靠内（例如只对内容区 overflow，不限制整个卡片）
特殊情况注意 fixed 定位
position: fixed 元素本应相对于视口定位，不受父级 overflow 影响——但若父级设置了 transform、perspective、filter 或 will-change，会触发新的包含块，此时也会被裁剪。
立即学习“前端免费学习笔记（深入）”；
- 检查父级是否含有上述 CSS 属性（尤其
transform: translateZ(0)这类“隐藏”触发属性） - 临时移除这些属性，确认是否为根源
- 如需保留视觉效果，可考虑用
clip-path替代overflow: hidden，它不创建新的包含块
调试小技巧
快速定位问题：
- 在开发者工具中，选中被裁剪的元素 → 右键 → “Scroll into view”，看是否真被截断
- 给父级临时加上
outline: 2px solid red，直观查看其实际渲染范围 - 在父级的 Styles 面板中，点击
overflow属性旁的箭头图标，查看是否被其他规则覆盖（如overflow-x单独设置）
