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