opacity: 0 仅改变绘制阶段透明度，不触发重排，保留布局占位与DOM结构，但需配合 pointer-events 和 aria-hidden 实现交互与无障碍控制。
opacity: 0 能直接隐藏元素视觉内容，同时保持其在文档流中的尺寸和位置——它不是“移除”，而是“变透明”，布局不受影响。
为什么 opacity: 0 不触发重排（reflow）？
浏览器渲染时，opacity 属于“合成层属性”，只影响绘制阶段（repaint），不改变盒模型计算。元素的 margin、padding、width、height 照常参与布局，父容器和兄弟元素完全感知不到它的“消失”。
- 适合用于动画过渡：配合
transition: opacity 0.2s实现淡入淡出 - 不能替代
display: none做条件性销毁——DOM 仍在，事件监听器、焦点、表单值都保留 - 若元素含子组件（如按钮内图标），整个树都会变透明，无法单独恢复某个子元素可见性
opacity: 0 和 visibility: hidden 的关键区别
两者都保留占位，但行为差异明显：
-
opacity: 0默认仍响应鼠标事件（click、hover），需手动加pointer-events: none关闭交互 -
visibility: hidden天然禁用所有指针事件，且子元素可通过visibility: visible单独显示 -
opacity: 0会创建新的层叠上下文（stacking context），可能干扰z-index层级，尤其在 modal、tooltip 等叠加场景中要小心 - 读屏软件仍会朗读
opacity: 0元素的内容；visibility: hidden则通常被辅助技术忽略
常见误用：把 opacity: 0 当作可访问性隐藏手段
这是高频踩坑点。仅靠 opacity: 0 无法让屏幕阅读器跳过该元素——它只是“看不见”，不是“不存在”。
- 若需兼顾视觉隐藏与无障碍，应叠加
aria-hidden="true"（对非交互元素）或aria-hidden="false"+tabindex="-1"（对需保留在焦点流但暂不展示的控件） - 不要用
opacity: 0隐藏登录表单字段再靠 JS 动态 show/hide——表单提交时字段仍会参与序列化，容易引发意料外的数据提交 - 调试时注意：DevTools 中元素仍高亮显示、可选中、能查看 computed styles，容易误判为“已移除”
真正要“隐藏但占位”，opacity: 0 是最轻量的选择；但只要涉及交互控制、无障碍或 z-index 复杂布局，就得立刻补上 pointer-events、aria-hidden 或换用 visibility: hidden ——没有万能写法，只有具体场景下的取舍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
