多个图片叠在同一格子不是bug而是grid默认行为；grid-area值相同时必然重叠，dom顺序决定层叠次序，z-index需配合position:relative才生效，且须确保拼写完全一致。
多个图片怎么叠在同一个格子里
这不是 bug，是 Grid 的正常行为：只要两个元素写了相同的 grid-area，而该区域只占一个单元格，它们就必然重叠。DOM 顺序决定谁在上——后写的元素默认压在前面的上面。
- 检查 DevTools → Elements → Computed 中的
grid-area值，显示为auto或空，说明命名没匹配上 - 拼写必须完全一致：
"slide"≠'slide'，"slide "（末尾空格）≠"slide" - 临时测试法：把所有
grid-area: "slide"改成grid-area: "slide-1"、"slide-2"……看是否还叠，快速定位冲突点
层叠幻灯片里 z-index 为啥不生效
z-index 对 Grid 子项默认无效，因为子项是 position: static —— 这不是 Grid 的限制，而是 CSS 层叠规则本身的要求。
- 错误写法：
.slide { z-index: 10; }→ 完全没反应 - 正确写法：
.slide { position: relative; z-index: 10; }→ 立刻参与层叠排序 - 不需要给父容器设
position: relative；只要子项自己定位，z-index就生效 - 如果用了
position: absolute，它会脱离网格轨道尺寸，必须手动设宽高，或用inset: 0填满所在格子
怎么让所有幻灯片精准居中且响应式稳定
Flexbox 在多层重叠场景下容易失效：它居中的是所有子项的外接矩形，而不是每个元素自身的中心点。Grid 的 place-items: center + grid-area: 1 / 1 才是真正解法。
- 父容器必须设
display: grid; place-items: center;，并确保高度撑满（如height: 100vh） - 每个幻灯片元素设
grid-area: 1 / 1，强制全部落在第一行第一列的同一位置 - 务必清除
body { margin: 0 }，否则100vh会被默认边距干扰 - 避免用
margin: auto或transform: translate(-50%, -50%)，这些在动态切换时易抖动或失准
自动切换时怎么控制层叠顺序
单纯靠 DOM 顺序不够灵活，尤其要支持按钮翻页、键盘切换或自动轮播时，得靠 order 动态干预渲染顺序。
- 给每张幻灯片加
order值：.slide.active { order: 1; }，其余设为order: 0，确保激活项总在最上 -
order和z-index可共存：order控制默认绘制顺序，z-index微调同order元素间的覆盖关系 - 切记：修改
order不影响 DOM 顺序，所以屏幕阅读器仍按原始 HTML 读取，语义不受损 - 动画过渡建议用
opacity+visibility，而非display: none—— 后者会让元素彻底退出网格布局，导致grid-area失效
z-index 或漏 reset order，就会出现两帧同时可见或遮挡错乱——这种问题往往只在真实交互中暴露，DevTools 里看不出。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
