全屏背景分割布局需设html和body高度为100%且无margin；网格容器用min-height:100vh；重叠靠多个元素共用grid-area实现；背景宜用::before伪元素分离控制；响应式需重定义grid-template-areas。
全屏背景分割布局必须设 html 和 body 高度为 100%
如果不显式设置，height: 100% 在子元素上会失效，导致网格容器无法撑满视口。常见表现是背景只覆盖部分内容，或网格区域高度塌缩。
-
html, body { height: 100%; margin: 0; }是必要前提 - 全屏网格容器（如
main或.grid）需设height: 100vh或min-height: 100vh，后者更稳妥（避免滚动条干扰） - 若用
100%，必须确保父级（body）已正确继承高度，否则无效
用 grid-template-areas 定义重叠区域要配合 grid-area 显式声明
CSS Grid 允许同一网格区域被多个元素声明，实现视觉重叠——但不是靠“z-index 层叠”，而是靠**多个元素占据相同命名区域**，再用定位或透明度控制显示优先级。
- 先在容器定义命名区域：
grid-template-areas: "hero hero" "content sidebar"; - 然后让两个元素都设
grid-area: "hero"，它们就会渲染在同一区域（默认流式堆叠，后声明的在上） - 若需精确控制叠放顺序，加
z-index（仅对定位元素或 grid item 有效，且需position: relative或类似） - 注意：重叠区域不能靠
grid-column / grid-row“错位拼接”来模拟，那只是相邻，不是真正重叠
背景图与内容分离时，用伪元素或空 div 承载背景更可控
直接在网格项上设 background-image 会导致内容文字和背景耦合过紧，缩放、居中、模糊等操作受限；用 ::before 可独立控制背景层。
- 给网格项设
position: relative，再用&::before { content: ""; position: absolute; inset: 0; background: url(...) center/cover; z-index: -1; } - 这样文字内容自然在前景，背景在底层，且不干扰网格轨道计算
- 若用空
div，需确保它也参与网格布局（如grid-area: hero），并设z-index: -1，否则可能破坏网格流 - 避免对
background-attachment: fixed依赖——在 flex/grid 容器中行为不稳定，尤其 Safari
响应式重叠区域要重定义 grid-template-areas，不能只调尺寸
移动端常需把侧边栏从右侧“收起”，变成叠加在主内容上方或下方，仅靠 grid-column 改变位置不够，必须重新划分区域结构。
- 桌面端：
grid-template-areas: "hero hero" "content sidebar" - 移动端：
grid-template-areas: "hero" "content" "sidebar"，再通过@media切换 - 如果想让 sidebar 在小屏时“浮在 content 上”，仍用重叠写法：
grid-template-areas: "hero" "content" "content"，然后让 sidebar 和 content 都设grid-area: "content" - 别忘了用
grid-auto-flow: dense防止空轨道影响重排，但慎用——它可能打乱语义顺序
重叠的本质是多个元素共享同一网格区域名，而不是靠偏移或负 margin 模拟；真正容易被忽略的是：重叠后若需点击穿透（比如背景图上有可点按钮），得用 pointer-events: none 控制交互层级，否则上层元素会拦截所有事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
