place-items: center + grid-area: 1/1 是唯一可靠解法，因Grid中每个子元素在统一单元格内按内容框中心对齐，确保几何中心真正重叠；而Flexbox的justify-content和align-items仅整体居中，尺寸不同时视觉偏移。
为什么 place-items: center + grid-area: 1/1 是唯一可靠解法
Flexbox 的 justify-content: center 和 align-items: center 对多个子元素只做“整体居中”，不是“每个元素独立以自身中心对齐容器中心”。一旦子元素尺寸不同（比如一张大图 + 一层半透明遮罩 + 一行标题），它们的外接矩形中心并不重合，视觉上就偏了。而 CSS Grid 的 place-items: center 作用于每个直接子元素的内容框，再配合 grid-area: 1 / 1 强制所有元素落在同一网格单元，才能让它们的几何中心真正重叠。
必须显式设置父容器为定位上下文才能用 z-index
很多人写了 z-index 却发现层级无效，根本原因是：只有定位元素（position 值不为 static）才响应 z-index。Grid 容器本身默认是 position: static，所以即使子元素设了 z-index，也因缺少层叠上下文而失效。
- 给
.container加position: relative（最轻量、不影响布局） - 避免在
.container上加transform、opacity: 0.99或filter—— 这些会创建新层叠上下文，导致子元素的z-index相对于容器内部重新计算，极易错乱 - 文字和背景图都设
position: relative再配z-index，不要只靠 DOM 顺序赌渲染顺序
background-image 与 ![]()
用 CSS background-image 的 div 和用 grid-area: 1 / 1 就能精准重叠。但实际使用中容易踩坑：
-
width: 100%; height: 100%，它可能按原始尺寸渲染并溢出或留白 -
background-image默认平铺，必须加background-size: cover或contain，且推荐加background-position: center防止偏移 - 如果叠加层含文字阴影（
text-shadow），要确保文字所在元素的z-index高于背景图，否则阴影会被盖住
移动端缩放和视口单位必须统一用 vh/vw
用 % 设容器高度时，若父级（如 body）没设高度，height: 100% 会失效，导致居中塌陷。这是多层叠加在 iOS Safari 上突然“掉下来”的常见原因。
- 容器高度写死为
height: 100vh，宽度用width: 100vw（注意：vw包含滚动条宽度，必要时用width: 100%替代） - 务必重置
body { margin: 0 }，否则100vh会因 body 默认外边距被撑开 - 文字大小建议用
rem或clamp()，避免在小屏上文字撑破叠加区域
真正难的不是写几行 Grid，而是所有层共享同一个锚点的同时，各自保持可维护的样式边界——比如背景图不能影响文字行高，遮罩层不能拦截 pointer-events，这些细节一旦漏掉，调试成本远高于初始实现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
