absolute元素在grid中不响应grid-column/grid-row，因其脱离文档流；需设grid容器为position: relative才能使其top/left以容器padding box为原点，实现视觉锚定。
absolute元素在Grid中不认grid-column/grid-row，因为它已脱离文档流
加了position: absolute的元素直接退出网格布局计算，grid-column、grid-row、grid-area这些属性在开发者工具里会显示为划掉状态——不是浏览器bug，是CSS规范行为。它不再占据轨道（track），也不响应行高、列宽变化。
常见错误现象：grid-column: 2 / 4写了但没效果，元素却飞到容器左上角甚至body左上角；或者top: 0; left: 0后，它贴的是整个Grid容器的padding box，而不是你期望的那个格子。
- Grid容器默认
position: static，不构成定位上下文，所以absolute元素会继续往上找，常落到body或外层div -
grid-area: header对absolute元素完全无效，它只是一组命名线，不创建containing block - 即使元素DOM结构是Grid直接子项，只要加了
absolute，就和网格线“失联”
让top/left真正参考grid-area边界，必须设Grid容器为relative
想让top: 8px; right: 8px真的从grid-area: header的右上角往里缩，就得让Grid容器（即写display: grid的那个父元素）成为containing block。唯一可靠做法：给它加position: relative。
这行代码一加，所有直接子级absolute元素的top/left就以该容器的padding box为原点，再配合grid-area语义，才能实现“视觉锚定”。
- 如果Grid容器本身已是
position: absolute或fixed，不用额外加relative，但要注意外层transform或filter可能悄悄创建新containing block - 别给网格项（如
.card）加position: relative来“局部锚定”——它会让.card自身脱离Grid尺寸控制，高度可能塌成0 - 用开发者工具查看Computed面板里的
offsetParent，能立刻确认当前元素到底锚在哪
grid-column + top/right混用时，像素值会覆盖网格线参考
像.tooltip { grid-column: 2; top: 5px; right: 5px; }这种写法看似合理，实则危险：top和right是绝对坐标，一旦Grid容器尺寸变化，偏移就错位；更关键的是，grid-column在这里仅起“占位参考”作用，并不约束渲染位置——它不会把元素拉到第2列区域里，只是告诉浏览器“这个元素逻辑上属于第2列”，而top/right直接覆盖了这个逻辑。
- 响应式下，
top: 12px在小屏会明显偏下，大屏又太靠上 - 百分比
top: 50%依赖父元素高度是否明确，Grid容器若高度由内容撑开，结果不可控 - 推荐用
inset: 8px替代四边单独写，语义清晰；旧版Chrome兼容性差时，降级为top: 8px; right: 8px; bottom: 8px; left: 8px - 需要居中时，优先
inset: 0; margin: auto;配width/height，比transform: translate(-50%, -50%)更稳
悬浮后父容器高度塌陷，是最容易被忽略的副作用
position: absolute子元素完全不参与父容器高度计算。如果父项（比如.card）原本只靠这个角标撑高，加完absolute后，.card的height可能变成0，导致下方内容上移、布局错乱。
- 检查父项是否有其他非
absolute内容能自然撑开高度；没有的话，得手动设min-height或height - 不要用
padding-bottom“假装”占位——它和悬浮位置无关，纯属障眼法，且破坏可维护性 - 如果悬浮内容本该影响布局（比如下拉菜单要顶开下面区域），那就别用
absolute，改用visibility: hidden+transform或max-height过渡动画
真正难的不是让元素“浮起来”，而是判断它该属于哪个定位上下文、是否该继续参与布局计算、以及塌陷后怎么补救——这些细节不调试根本看不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
