visibility: hidden 并非 bug，而是设计行为：它仅跳过绘制，仍参与布局计算，故占位不消失；常见误用包括混淆 display: none、忽略子元素需显式设 visible、打印兼容性差及无障碍需额外处理 aria-hidden。
visibility: hidden 为什么“占着位置却不消失”
它不是 bug，是设计行为：visibility: hidden 只跳过绘制（paint），不跳过布局（layout）——浏览器仍会计算它的 width、height、margin、padding，父容器高度照常撑开，兄弟元素位置纹丝不动。你看到的“空位”，就是它实实在在占着的盒模型空间。
常见错误现象：以为 hidden “没生效”
现象：元素看不见了，但旁边内容没动、滚动条还在、父容器高度没变——这不是失效，恰恰是它生效了。容易踩的坑包括：
- 把
visibility: hidden当成display: none用，结果页面不抖，反而怀疑代码写错了 - 给父元素设了
visibility: hidden，又希望某个子元素显示，却忘了子元素必须显式写visibility: visible（继承可破，但得手动破） - 在打印样式里依赖它隐藏内容，但部分浏览器仍会打印
visibility: hidden元素（display: none才绝对不打）
真正要“隐藏且不占位”，得看上下文
没有万能解法，关键看你要什么：
- 纯视觉隐藏 + 保留交互区域（比如 hover 区域预占）→
visibility: hidden正确 - 隐藏 + 腾空间 + 后续可能插入新内容 →
display: none更合适 - 需要渐隐动画 → 必须放弃
visibility，改用opacity: 0+pointer-events: none，再配transition - 表格行/列想“隐藏但保持结构” → 可用
visibility: collapse（仅对table-*元素有效）
最常被忽略的一点：无障碍和 JS 检测
visibility: hidden 不影响 tabindex 和屏幕阅读器读取，无障碍需同步加 aria-hidden="true"；JS 中 getComputedStyle(el).visibility === 'hidden' 是可靠判断，但 el.offsetParent 和 el.getClientRects() 在 visibility: hidden 下依然返回有效值——这点和 display: none 截然不同。
立即学习“前端免费学习笔记（深入）”；
