CSS设置#popup弹窗隐藏后仍占用空间产生大面积空白的问题求助

异常产生的核心原因 #

观测到的大面积页面空白，本质是当前采用的两个隐藏属性的布局特性导致的：
visibility: hidden 和 opacity: 0 仅能实现视觉层面的隐藏，不会让元素脱离文档流——浏览器依旧会按照元素本身的尺寸为它分配对应的页面占位空间，哪怕用户完全看不到这个元素，预留的空白也会留在页面上。
之前测试修改元素id后空白消失，是因为修改id后原本绑定在#popup上的自定义隐藏规则失效，元素回到了类选择器的默认布局逻辑，这个测试结果也验证了占位空间的来源就是这个被隐藏的弹窗div。

补充说明：提到的popupWindow函数和该占位问题没有关联，这个函数的作用是打开新的独立浏览器窗口，完全不会修改当前页面内该div的布局属性。

现有样式的问题点 #

当前给#popup配置的样式仅实现了视觉隐藏，没有处理占位逻辑：

#popup {
    visibility: hidden;
    opacity: 0;
    margin-top: 0px;
}

对应修复方案 #

根据弹窗的常规交互逻辑，给出两种可直接落地的实现，按需选择即可：

1. 保留弹窗渐入渐出动画的常规方案（优先推荐）
   给弹窗补充固定定位规则，让它从默认状态下就脱离文档流，不再占用主页面的空间：

   #popup {
       /* 保留原有隐藏逻辑，方便后续做淡入淡出过渡动画 */
       visibility: hidden;
       opacity: 0;
       margin-top: 0px;
       /* 新增脱离文档流的定位规则 */
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       /* 保证弹窗显示时层级在页面最上方 */
       z-index: 999;
       /* 可按需补充过渡动画属性，比如 transition: all 0.3s ease; */
   }
   

   这种实现下，弹窗默认隐藏时不会占据任何主页面空间，显示时会以浮层的形式覆盖在页面内容上方，完全不会改变原有页面的滚动高度，是网站弹窗最常用的实现方式。
2. 无动画需求的极简方案
   如果不需要弹窗的过渡动画效果，可以直接用不占空间的隐藏属性替换原有视觉隐藏逻辑：

   #popup {
       display: none;
   }
   

   这种写法实现简单，但缺点是显示弹窗时需要手动把display属性改为对应可见值（如block），无法实现自然的淡入淡出过渡效果。

易混淆的隐藏属性差异 #

为了避免后续再碰到同类问题，可提前理清三个常用元素隐藏属性的核心区别：

• display: none：元素完全脱离文档流，不参与页面布局计算，无任何占位，不支持过渡动画
• visibility: hidden：元素保留全部布局占位，仅视觉上不可见，可单独给子元素设置可见属性
• opacity: 0：元素保留全部布局占位，仅视觉透明度为0，依然可以响应鼠标点击交互

内容的提问来源于stack exchange，提问作者className