必须用 opacity + visibility 配合 transition 实现幻灯片切换，因 display 不支持过渡、z-index 不控制渲染与交互，且 absolute 堆叠需配合相对定位容器与严格 dom 结构才能确保可见性与交互正确。

能实现，但必须用 opacity + visibility 配合 transition，不能只靠 display 或 z-index 切换。

AI一键生成成品PPT☜☜☜☜☜点击生成；

为什么不能只用 position: absolute 堆叠就完事

堆叠只是让所有幻灯片在同一个位置重叠，但浏览器默认会把所有元素都渲染出来——你得主动控制“哪一张可见”。如果只写 display: none / block，切换时没有过渡动画，会硬切；如果只调 z-index，没配 opacity 或 visibility，旧幻灯片仍可被点击、聚焦，甚至影响 tab 键顺序。

• display 不支持 CSS 过渡（transition 对它无效）
• z-index 本身不控制是否渲染，只控制层叠顺序，无法解决点击穿透
• 纯 absolute 堆叠后，若没设 top/left，元素可能因文档流残留偏移

:checked + ~ 控制显隐时的 DOM 结构硬要求

这个模式依赖 CSS 选择器能力，不是 JS，所以对 HTML 结构非常敏感：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 所有 <input type="radio"> 必须同名，比如 name="slide"，否则无法互斥选中
• <input> 必须在所有 .slide 元素之前（DOM 顺序），且在同一父级下
• 必须用 ~（通用兄弟选择器），不是 +（相邻兄弟）——因为中间可能插入 <label></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></label> 包裹完整，for 属性正确指向 id，别依赖小 radio 按钮本身

绝对定位的尺寸与定位基准必须显式固定

position: absolute 的元素脱离文档流，它的 top/left 是相对于最近的 position: relative 祖先。如果父容器没设 position: relative，它就会往上找，直到 ，容易错位：

• 包裹所有幻灯片的容器必须加 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 上出现点击失效、首屏不显示、切换卡顿等问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！