grid-area命名区域对绝对定位元素完全无效，因其已脱离网格流；必须为grid容器设置position: relative，并改用grid-row/column线号或top/left等偏移定位。
grid-area 命名区域在绝对定位下完全无效
写了 grid-area: hero 却发现元素根本没进命名区域？这不是你 CSS 写错了，而是 position: absolute 元素压根不响应 grid-area。浏览器会直接忽略该声明——命名区域只对参与网格布局流的常规子项生效，绝对定位元素已脱离轨道计算，grid-area 对它形同注释。
常见错误现象：.card { position: absolute; grid-area: sidebar; }，结果元素飞到视口左上角。此时别调 grid-area，先检查父容器是否设了 position: relative，再用线号或 inset 控制定位。
- 必须放弃“用命名区域自动对齐”的幻想，改用显式线号：如
grid-column: 2 / 4; grid-row: 1 / 3; - 若已有命名区域定义（如
grid-template-areas: "hero hero sidebar"），可查 DevTools Grid 面板确认对应线号，再转写为数字语法 - 临时加
outline: 1px solid #000到 grid 容器，能肉眼验证线号位置，比猜命名映射靠谱得多
用 line-number 精确锚定到任意网格交点
所谓“不规则拼贴”，本质是让多个元素分别钉在不同网格线交叉处，比如左上角、右下角、中间偏右第二列线等。这必须依赖 line-number —— 它是唯一能稳定表达“第几条线”的机制，且从 1 开始计数，无 0 值。
例如，想把一个角标固定在第三列起始线、第二行结束线的位置：grid-column: 3; grid-row: 2 / 3;。注意这里 grid-row: 2 / 3 不是占满整行，而是锚定在第 2 条线到第 3 条线之间这个“点”上（视觉上就是该交点）。
- 负值可用但需谨慎：
grid-column: -2 / -1表示倒数第二列线到最后一列线，适合右侧动态宽度场景 - gap 不产生线号，别误把 gap 当作轨道边界；线号只属于 track 之间的分界
- 用 Chrome DevTools → Styles 面板 → 点击
display: grid右侧蓝色图标 → 勾选 “Show line numbers”，实时看线号分布
绝对定位 + grid-line 组合时 inset 优先级最高
一旦同时写了 grid-column: 2 / 4 和 left: 20px，left 会直接覆盖网格线的参考逻辑——元素不再以第 2 条线为起点，而是从整个容器左边缘开始偏移 20px。这是最常踩的坑：以为网格线和偏移是叠加关系，实际是“锚点 + 偏移”，而 inset 类属性（top/right 等）永远胜出。
调试时发现位置漂移，第一反应不是改线号，而是检查有没有残留的 top/left 声明。
- 纯线号控制：删掉所有
top/right/bottom/left，仅靠grid-column和grid-row定位（此时元素会紧贴对应线交点） - 纯偏移控制：保留
inset，把grid-column当作语义注释（如/* anchor to col 3 */ grid-column: 3;），不依赖其定位效果 - Firefox 下慎用
grid-column+transform混合，有已知抖动问题，优先用inset
grid 容器必须显式设 position: relative
只写 display: grid，子元素设 position: absolute，结果元素跑到 body 左上角——这不是 bug，是规范行为。因为 position: static（默认）不创建定位上下文，浏览器只能往上找，直到 body 或 html。
必须给 grid 容器加 position: relative（或 absolute/fixed），才能让它成为子元素的定位参考。这点和普通“子绝父相”完全一致，但容易被忽略，尤其当容器本身已有其他定位需求时。
- 如果容器已是
position: absolute，不用重复加relative，但要注意它的父级是否也设了定位，否则仍可能向上穿透 - 切勿在 grid item 上设
position: relative再放绝对定位子元素——那会创建新定位上下文，导致子元素脱离 grid 轨道控制 - 绝对定位元素不占 grid 轨道空间，不会撑开行高或列宽；若需“参与占位”，改用
place-self+margin或transform
不规则拼贴真正难的不是写多少种 grid-column 组合，而是时刻意识到：绝对定位元素和网格布局流是两套系统，它们只在“定位参考点”上交汇，其余时间互不感知。线号是唯一可靠的交汇坐标，而 position: relative 是那个不容跳过的握手协议。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
