CSS Grid 中“置顶”需用 z-index 配合 position（如 relative），而非 grid-row 或 order；grid-row 仅控制行轨道位置，order 会破坏可访问性与布局稳定性；绝对定位适用于悬浮元素，但需确保父容器有 position: relative。
grid-row 顺序调整不能直接“置顶”
在 CSS Grid 中，grid-row 控制的是元素在行轨道中的起止位置（比如 grid-row: 1 / 3），它不改变元素在源顺序中的逻辑层级，也不等价于视觉上的“置顶”。所谓“置顶”，通常指让某个网格项显示在所有其他项之上——这本质是层叠（stacking）问题，不是轨道分配问题。
真正起作用的是 z-index + grid 容器的 stacking context
Grid 容器默认会为每个子项创建独立的层叠上下文（前提是该子项有定位属性或 z-index 值）。要让某元素视觉上“置顶”，需同时满足：
-
position不为static（哪怕只是position: relative） - 设置
z-index为一个足够大的正数 - 确保父容器（grid 容器）没有意外的
transform、opacity 等触发新 stacking context 的属性干扰层级
/* 网格容器 */
.grid {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 1fr 1fr;
}
/ 想置顶的元素 /
.top-item {
grid-row: 2 / 3;
grid-column: 1 / -1;
position: relative; / 必须加，否则 z-index 无效 /
z-index: 10;
}
用 order 属性改源顺序？小心副作用
order 属性确实能改变网格项在布局流中的排列顺序，但它影响的是整个网格的自动行/列分配逻辑（尤其在 grid-auto-flow: row 下），不是局部“提一层”。滥用 order 可能导致：
- 其他未显式指定
grid-row的元素被挤到意想不到的位置 - 可访问性（screen reader）顺序与视觉顺序不一致
- 响应式断点中难以维护行为一致性
除非你明确需要重排整行/列的逻辑顺序，否则不要用 order 替代 z-index 解决“置顶”需求。
立即学习“前端免费学习笔记（深入）”；
绝对定位 + grid 容器作为定位上下文更可控
如果“置顶”意味着脱离网格轨道、悬浮在顶部区域（比如全宽 banner 或提示条），更稳妥的方式是结合 position: absolute 和 inset：
.top-banner {
grid-column: 1 / -1;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 100;
/* 或用 inset: 0 0 auto 0; */
}注意：此时需确保 grid 容器有 position: relative，否则绝对定位会相对于视口或最近定位祖先。
最常被忽略的一点：浏览器渲染时，z-index 只在同一个 stacking context 内比较大小。Grid 子项的默认 stacking context 是隐式创建的，但一旦父容器设置了 transform 或 will-change，就可能生成新的、隔离的上下文——这时再高的 z-index 也压不住兄弟项。调试时先检查 computed styles 里的 stacking context 是否如预期。
