弹窗必须用position: fixed，否则滚动时会偏移或消失；需配合top:0、left:0、width:100%、height:100%完整覆盖视口，禁用display切换以避免重排和弹跳，改用visibility+opacity实现平滑过渡。
必须用 position: fixed，否则弹窗会随滚动消失；不能用 display 切换显示状态，否则页面重排、遮罩错位、关闭后内容“弹跳”。
为什么弹窗一定要设 position: fixed
浏览器默认锚点跳转会滚动页面，把匹配 :target 的元素滚到视口顶部。如果弹窗容器是 static 或 relative 定位，它就会被一起拖走——可能卡在顶部空白处，甚至完全滚出屏幕。只有 position: fixed 能让它钉在视口内，不受滚动影响。
必须同时设置：top: 0、left: 0、width: 100%、height: 100%，才能完整覆盖视口，否则遮罩不全、点击穿透。
- 别只写
position: fixed就完事，漏掉任一尺寸声明都可能导致遮罩层高度塌陷或宽度不足 - 移动端需额外加
min-height: 100vh，防止内容过短时遮罩无法撑满屏幕 - iOS Safari 中若父容器有
transform，可能干扰fixed定位，此时要避免对弹窗祖先设transform
:target 显示/隐藏不能用 display
display 属性不可过渡动画，且切换时会触发重排（reflow）：弹窗出现瞬间，下方内容上移；关闭后又“啪”地弹回原位。遮罩层也常因此错位、盖不住底层内容。
立即学习“Java免费学习笔记（深入）”；
正确做法是组合 visibility 和 opacity：
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 默认状态：
visibility: hidden; opacity: 0; -
:target状态：visibility: visible; opacity: 1; - 加上
transition: opacity 0.2s, visibility 0.2s实现淡入淡出
注意：visibility: hidden 仍占文档流位置，所以必须配合 position: fixed + z-index，否则会空出一块白条影响布局。
关闭按钮 href="#” 失效的真正原因
点击 href="#" 后弹窗没关，不是 CSS 写错了，而是页面里存在“幽灵 ID”：
- HTML 中有空
id=""、带空格的id=" "，或注释里残留的id="xxx" - 浏览器把
#当作匹配空 ID，:target意外命中那个不可见元素，导致样式持续生效 - 构建工具（如某些 SSR 框架）可能注入带空 ID 的占位节点，本地开发看不到，上线后才暴露
排查方法：打开 DevTools，在控制台运行 $$('[id=""], [id=" "]')。修复方式：删掉所有空 ID，或加兜底规则：:target:not(#modal-login):not(#modal-privacy) { visibility: hidden; }。
移动端遮罩点击无响应？不是 CSS 问题
iOS Safari 和部分 Android 浏览器中，点击 fixed 遮罩层没反应，根本原因不是样式没生效，而是浏览器默认不把无交互属性的 div 当作可点击区域。
- 遮罩层必须是
<a>标签，不能只靠div+:target控制显示 - 给遮罩加
style="cursor: pointer;"，能显著提升触摸响应率 - 遮罩内部不要嵌套其他可点击元素（比如按钮），否则事件冒泡会干扰 hash 更新
- 避免用
pointer-events: none，它会让整个遮罩失效
最稳妥的结构是：<a href="#" class="overlay"></a>，再用 .overlay:target 控制显隐，而不是靠子元素触发。
