父元素 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元素 - 对内容区单独包裹一层
<div class="content">，把overflow: hidden移到该内层，让定位元素脱离这个裁剪容器 - 用
mask或透明渐变背景模拟“隐去边缘”，适合圆角/不规则裁剪场景
fixed 定位元素仍被裁剪？检查 transform 父级
position: fixed 理论上应相对于视口，但若父元素有 transform、perspective 或 filter（哪怕值是 none），它会强制创建新的 stacking context 和 containing block，导致 fixed 元素被意外约束。
立即学习“前端免费学习笔记（深入）”；
-
浏览器实际行为中，Chrome/Firefox 都会因
transform: translateZ(0)触发这种限制 - 检查父级是否含
transform相关声明，临时注释掉，验证是否恢复 - 如需硬件加速但又想保 fixed 行为，可将 fixed 元素移到
<body>直接子级，用 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 层级。
