visibility: hidden 是隐藏元素但保留布局空间的标准解法，元素不可见却参与文档流，不影响周围布局，且不触发重排，适用于需频繁切换显隐的场景。
用 visibility: hidden 隐藏元素但保留布局空间
直接设置 visibility: hidden 是最符合你需求的做法：元素不可见，但依然参与文档流，占据原有位置，不影响周围元素的布局。
它和 display: none 的核心区别在于是否“脱离文档流”——后者会彻底移除渲染占位，而前者只是“变透明”。
- 适用于需要频繁切换显隐、又不想触发重排（
reflow）的场景，比如悬停菜单、状态提示条 - 子元素默认继承该属性，但可通过设置
visibility: visible单独恢复显示 - 注意：它不会阻止元素响应鼠标事件（如
click、hover），如需禁用交互，得额外加pointer-events: none
visibility 的三个取值及实际表现
visibility 支持 visible、hidden、collapse 三种值，其中 collapse 在非表格元素上等价于 hidden；在表格行/列上则表现接近 display: none（隐藏且不占空间）。
-
visibility: visible— 正常显示 -
visibility: hidden— 隐藏但保留位置，子元素可被设为visible单独显示 -
visibility: collapse— 表格中隐藏行/列且不占空间；其他元素中行为同hidden（浏览器兼容性略差，慎用）
和 opacity: 0 的关键区别在哪
opacity: 0 会让元素完全透明，视觉上消失，但它仍占据空间、响应事件、可被聚焦（如通过 Tab 键），这点和 visibility: hidden 表面相似，但底层机制不同。
立即学习“前端免费学习笔记（深入）”；
-
visibility: hidden会阻止大多数事件冒泡（子元素设为visible后可响应事件） -
opacity: 0不影响事件捕获与冒泡流程，事件仍能穿透或被捕获（取决于pointer-events设置） - 动画性能：
opacity是合成属性，硬件加速友好；visibility切换不触发重绘（repaint）但无法做渐变动画
容易忽略的继承与堆叠上下文问题
visibility 是可继承属性，父元素设为 hidden，子元素默认也看不见——即使你没给子元素写样式。这点常被误认为“样式没生效”，其实是被继承压制了。
- 若想让某个子元素在父级
visibility: hidden下仍可见，必须显式声明visibility: visible - 它不会创建新的堆叠上下文（
z-index仍由最近的定位祖先决定），而opacity < 1会创建新堆叠上下文，可能意外改变层叠顺序 - 当配合
transform或filter使用时，visibility: hidden优先级更高：即使有transform: scale(1)，只要 visibility 是 hidden，就什么也看不到
visibility: hidden 就是标准解法。别被 opacity 的“看起来一样”带偏——事件响应、继承行为、堆叠逻辑，全都不一样。 
