不能只靠 position: absolute 堆叠，因需主动控制可见性、避免点击穿透、实现平滑过渡；须配合 :checked + ~ 选择器、显式定位、opacity 与 visibility 同步过渡等完整机制。
为什么不能只靠 position: absolute 堆叠就完事
堆叠只是让所有幻灯片在同一个视觉位置重叠，但浏览器默认会把它们全部渲染出来——你得主动控制“哪一张可见”。如果只写 display: none/display: block，切换时没有过渡动画，会硬切；如果只调 z-index，旧幻灯片仍可被点击、聚焦，甚至影响 tab 键顺序。
display 不支持 CSS 过渡（transition 对它无效）；z-index 本身不控制是否渲染，只控制层叠顺序，无法解决点击穿透问题。纯 absolute 堆叠后，若没设 top/left，元素可能因文档流残留偏移。
:checked + ~ 控制显隐时的 DOM 结构硬要求
这个模式依赖 CSS 选择器能力，不是 JS，所以对 HTML 结构非常敏感：
- 所有
<input type="radio">必须同名，比如name="slide"，否则无法互斥选中 -
<input>必须在所有.slide元素之前（DOM 顺序），且在同一父级下 - 必须用
~（通用兄弟选择器），不是+（相邻兄弟）——因为中间可能插入<label></label>或其他辅助元素 -
.slide初始状态必须设opacity: 0; visibility: hidden;，否则第一张不会自动显示（:checked ~ .slide不匹配自身）
opacity 和 visibility 必须一起过渡
只写 transition: opacity 0.4s ease 不够。因为 visibility: hidden 立即生效，而 opacity: 0 是渐变消失，两者不同步会导致“半透明残留”或“点击穿透”：
立即学习“前端免费学习笔记（深入）”；
- 必须同时过渡两个属性：
transition: opacity 0.4s ease, visibility 0.4s; -
visibility的过渡时间必须和opacity一致，否则visibility提前变hidden，opacity还在动，视觉上会“闪一下” - 不要给
.slide设pointer-events: none来防点击——它不随opacity变化，容易误关交互；用visibility更可靠
绝对定位的尺寸与定位基准必须显式固定
position: absolute 的元素脱离文档流，它的 top/left 是相对于最近的 position: relative 祖先。如果父容器没设 position: relative，它就会往上找，直到 ，容易错位：
- 包裹所有幻灯片的容器必须加
position: relative - 每张
.slide要明确写top: 0; left: 0; width: 100%; height: 100%;，不能靠内容撑开 - 移动端点击区域小？确保
<label></label>包裹完整，for属性正确指向id，别依赖小radio按钮本身
visibility 过渡漏掉、父容器忘了 position: relative，都会导致第一张不显示、切换卡顿或点击穿透——不是某个环节“差不多就行”，而是整套机制像齿轮咬合，少一齿就转不动。 
