如何隐藏一个元素

【常见方法对比】

方法是否占据空间是否可交互是否触发重绘/回流典型场景

display:none

❌ 不占空间

❌ 不可交互

回流+重绘

完全移除元素（菜单切换、Tab 切换）

visibility:hidden

✅ 占空间

❌ 不可交互

重绘

保留布局避免抖动

opacity:0

✅ 占空间

✅ 可交互(可用 pointer-events:none 禁止)

重绘

需要动画渐变或保留点击区域

position:absolute + 远移

❌/✅(取决于定位)

❌

回流

需要保留 DOM 但彻底移出可视区

clip-path / transform:scale(0)

✅ 占空间

❌(可配合 pointer-events)

重绘/GPU

动画、过渡

z-index:-1

✅ 占空间

❌(被其他元素覆盖)

重绘

简单遮挡，不推荐作为隐藏

aria-hidden="true"

✅

✅

无

仅无障碍隐藏（屏幕阅读器不可见）

⚠️ 使用注意

1、动画需求：如果需要渐隐渐现，用 opacity + transition，因为display 无法过渡2、布局影响：display: none 会导致周围元素重新计算布局( 回流 )，如果需要频繁切换 性能开销较大3、可访问性：仅视觉隐藏但是 可以被屏幕阅读器访问，考虑使用 aria-hidden=true4、交互控制：opacity: 0 可以点击，可以通过 pointer-events: none 禁止

🎯 面试小技巧

“选择隐藏方式要看需求：

完全移除用 display:none，

保留位置用 visibility:hidden，

需要渐变动画用 opacity:0 配合 pointer-events:none。”