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 与 <img alt="如何利用CSS Grid实现多层背景与文字的精准居中叠加？" > 在叠加时的行为差异
用 CSS background-image 的 div 和用 <img alt="如何利用CSS Grid实现多层背景与文字的精准居中叠加？" > 标签的图片，在 Grid 中表现一致——只要都设了 grid-area: 1 / 1 就能精准重叠。但实际使用中容易踩坑：
-
<img alt="如何利用CSS Grid实现多层背景与文字的精准居中叠加？" >默认是替换元素，自带固有宽高，若没设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()，避免在小屏上文字撑破叠加区域
