使用 visibility: hidden 或 opacity: 0 可在不改变文档流的前提下“覆盖”元素，使其不可见但保留原始占位空间，适用于需维持页面结构的样式调试、渐变过渡或无障碍兼容等场景。
使用 visibility: hidden 或 opacity: 0 可在不改变文档流的前提下“覆盖”元素，使其不可见但保留原始占位空间，适用于需维持页面结构的样式调试、渐变过渡或无障碍兼容等场景。
在 Web 开发中，当需要临时隐藏某个元素（如按钮、卡片或广告位），同时又不希望其从布局中“消失”导致周围内容发生位移时，display: none 并非合适选择——因为它会彻底移除元素在文档流中的位置，引发重排（reflow），破坏原有视觉节奏与交互逻辑。
此时，更精准的解决方案是采用以下两种 CSS 属性：
- visibility: hidden：元素完全不可见，但仍占据原有空间，且其子元素默认继承该状态（可通过 visibility: visible 单独恢复）；该属性支持动画过渡（但注意：visibility 本身为离散值，过渡效果需配合 opacity 或 transform 实现平滑变化）；
- opacity: 0：将元素透明度设为零，视觉上完全隐藏，但元素仍参与布局、响应事件（如点击、悬停），且支持 CSS 过渡与动画（例如 transition: opacity 0.3s ease）。
✅ 推荐用法示例：
/* 方案一：隐藏但保留占位与事件响应 */
.covered-element {
opacity: 0;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.covered-element:hover {
opacity: 1; /* 可交互式显示 */
}
/* 方案二：隐藏且阻止子元素交互（更接近“视觉遮盖”语义） */
.hidden-visually {
visibility: hidden;
}⚠️ 注意事项：
- visibility: hidden 的子元素若显式设置 visibility: visible，仍可被显示；而 opacity: 0 的子元素会继承父级透明度（除非重置 opacity: 1）；
- 若需彻底禁用交互（如防止误点），应额外添加 pointer-events: none（配合 opacity: 0 使用更常见）；
- 对于屏幕阅读器兼容性：visibility: hidden 和 opacity: 0 均不会使元素脱离可访问树（即仍可能被读屏软件识别），如需真正隐藏语义内容，请结合 aria-hidden="true" 或使用 clip-path: inset(100%) + position: absolute 等辅助方案。
总结：visibility: hidden 更侧重“视觉隐藏+布局保留”，适合调试与条件展示；opacity: 0 更适合动效控制与交互反馈。根据具体需求选择，并注意可访问性与事件行为的协同处理。
