不能靠父元素加 overflow: hidden 同时让子元素“溢出显示”，真正解法是将溢出部分移出裁剪上下文；现代推荐用 Portal/Teleport 或 JS 动态挂载到 body，配合 position: fixed 与滚动监听。
不能靠父元素加 overflow: hidden 同时又让子元素“溢出显示”——这是逻辑冲突。真正要的是：子元素视觉上破框而出，但父容器仍保持裁剪其他内容的能力。解法不是在同一个容器上“既要又要”，而是把溢出部分移出裁剪上下文。
为什么 overflow: hidden + position: absolute 无法实现“局部隐藏、局部溢出”
因为 overflow: hidden 的裁剪行为只作用于它的「包含块」内且处于同一层叠上下文的后代。一旦子元素是 position: absolute，它就脱离文档流；若父容器没设 position: relative，它的包含块可能是 body 或更上层祖先，此时你在“看起来像父级”的容器上加 overflow: hidden，根本没作用对象。
- 父容器仅设
overflow: hidden，但position仍是static→ 子元素定位参考跳过它，裁剪失效 - 父容器设了
position: relative和overflow: hidden，但子元素z-index高且父容器未创建层叠上下文 → 裁剪可能被绕过（尤其在旧版 Safari） - 用
transform: translateZ(0)触发 BFC 替代position: relative→ 有效，但会隐式创建新层叠上下文，可能遮挡兄弟元素
想让 tooltip / 下拉菜单“破框而出”，必须脱离裁剪容器
纯 CSS 无通用解法。现代框架推荐 DOM 提升（Portal / Teleport），原生方案靠 JS 动态挂载到 document.body 并计算位置：
- 监听触发元素的
getBoundingClientRect()，算出top/left偏移 - 把弹层节点用
document.body.appendChild()移出原父容器 - 设置
position: fixed或position: absolute+top/left，避免滚动错位 - 注意处理滚动/resize 事件，重新定位（或用
position: fixed+transform: translate()避免重排）
overflow: clip 是更干净的替代，但兼容性有限
overflow: clip 语义明确：只裁剪，不触发滚动、不隐式创建层叠上下文、不干扰 border-radius。但它目前仅 Chrome 119+、Firefox 111+、Safari 15.4+ 支持。
立即学习“前端免费学习笔记（深入）”；
- 可安全替换
overflow: hidden用于纯裁剪场景，比如卡片头像、图标容器 - 仍需配合
position: relative才对absolute子元素生效 - 别用
clip-path: inset(0)模拟——它不建立裁剪上下文，且禁用滚动、无法和圆角共存
最容易被忽略的，是花半小时调 z-index 却不打开开发者工具看一眼「Containing block」——右键检查元素，在 Styles 面板里找 “Containing block: …” 这一行，比猜十次定位逻辑都快。
