父元素 overflow: hidden 会裁剪溢出的绝对或固定定位子元素，因其创建了包含块并触发视觉裁剪；应分离定位与裁剪职责，避免在定位父级上使用 overflow: hidden。
父元素 overflow: hidden 导致子元素定位溢出被裁剪
当用 position: absolute 或 position: fixed 定位子元素时，若其超出父容器范围，而父元素设置了 overflow: hidden，子元素就会被视觉截断——这不是定位失效，是渲染层被父级裁剪了。
检查定位上下文是否意外创建了 containing block
绝对定位元素的偏移参考的是「最近的非 static 定位祖先」，一旦父元素加了 position: relative（哪怕只是为布局），它就变成 containing block，同时若又带 overflow: hidden，裁剪就立刻生效。
- 临时去掉父元素的
position: relative，看子元素是否恢复显示——能说明问题出在 containing block 上 - 如果必须保留父级定位（比如为了配合其他子元素对齐），就别依赖它做 containing block，改用更上层的容器作为定位锚点
- 避免给不需要参与定位逻辑的父级加
position声明
替代 overflow: hidden 的视觉隐藏方案
如果本意只是隐藏内容溢出、又不想影响定位子元素，overflow: hidden 就不该用在定位上下文的父级上。可改用这些方式：
- 用
clip-path: inset(0)实现视觉裁剪，它不影响 containing block 行为，也不裁剪position: fixed元素 - 对内容区单独包裹一层 ，把
overflow: hidden移到该内层，让定位元素脱离这个裁剪容器- 用
mask或透明渐变背景模拟“隐去边缘”，适合圆角/不规则裁剪场景fixed 定位元素仍被裁剪？检查 transform 父级
position: fixed理论上应相对于视口，但若父元素有transform、perspective或filter（哪怕值是none），它会强制创建新的 stacking context 和 containing block，导致 fixed 元素被意外约束。立即学习“前端免费学习笔记（深入）”；
-
浏览器实际行为中，Chrome/Firefox 都会因
transform: translateZ(0)触发这种限制 - 检查父级是否含
transform相关声明，临时注释掉，验证是否恢复 - 如需硬件加速但又想保 fixed 行为，可将 fixed 元素移到
直接子级，用 JS 动态同步位置
.dropdown { position: absolute; top: 100%; left: 0; /* 不要在这里加 overflow: hidden */ } .parent { /* 错误：同时有 position + overflow */ position: relative; overflow: hidden; } /* 正确：裁剪和定位职责分离 */ .parent { position: relative; /* 仅用于布局对齐 */ } .parent .content { overflow: hidden; /* 裁剪只作用于内容区 */ }真正棘手的不是 overflow 本身，而是它和 positioning、transform、stacking context 这三者交织时产生的隐式约束——这些约束不会报错，只在视觉上“消失”，排查时容易漏掉 transform 父级或嵌套的 containing block 层级。
- 用
