absolute子元素被裁剪是因为grid容器（display: grid）在overflow为hidden时自动成为其包含块，与是否设置position: relative无关；修复方式是加position: relative并设overflow: visible，或用portal/teleport移出dom。
Grid容器加了overflow: hidden，为什么absolute子元素被裁了
不是Grid本身的问题，是CSS规范明确规定的：只要一个容器是display: grid（或flex），且overflow值为hidden、auto或scroll，它就会成为内部position: absolute元素的包含块（containing block）——哪怕它没写position: relative。浏览器据此裁剪，和你有没有手动设定位毫无关系。
常见误判是只盯着“父级有没有position: relative”，却漏掉了Grid容器自带的包含块能力。DevTools里看Computed面板的containing block字段，十次有九次会指向那个display: grid的祖先。
不改DOM结构，最快修复方式
给Grid容器显式加position: relative，再把overflow改成visible：
.grid-container {
display: grid;
position: relative; /* 必须加，否则overflow: visible可能被忽略 */
overflow: visible; /* 唯一能解除裁剪的overflow值 */
}
注意：overflow: visible在Grid/Flex容器上是有效的，且不会触发新层叠上下文，副作用最小。别用clip-path: inset(0)替代——它不改变包含块逻辑，但兼容性差，还禁用滚动。
- 如果Grid容器必须保持
overflow: hidden（比如防动画穿出），那就不能靠样式绕过，得动结构 - 不要试图用
z-index或transform: translateZ(0)“提层”——前者完全无效，后者反而强化裁剪
必须保留overflow: hidden时，怎么安全移出absolute元素
把绝对定位元素从Grid容器里“搬”出去，挂到body下，再用JS动态算位置。现代框架有标准解法：
- React：用
ReactDOM.createPortal，传入document.body - Vue 3：用
<teleport to="body"></teleport> - 纯HTML/CSS：手动
appendChild+getBoundingClientRect()计算top/left
关键点：挂载后，该元素的包含块变成html或body，彻底脱离Grid容器的overflow管辖范围。但要注意滚动时位置需重算——监听scroll或用IntersectionObserver做轻量更新。
最容易被忽略的隐藏雷区
Grid容器的父级如果加了transform（比如transform: translateZ(0)）、filter或will-change，哪怕Grid自己是position: static，也会被强制创建新的包含块和层叠上下文——此时裁剪可能发生在更上层，DevTools里containing block显示的不是Grid而是它的爷爷节点。
验证方法很简单：临时注释掉所有祖先的transform和filter声明，看absolute元素是否立刻恢复。别猜，直接删着试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
