:target弹窗必须用position:fixed，否则会随页面滚动消失；需设top:0;left:0;width:100%;height:100%覆盖视口，并用visibility+opacity替代display避免重排和闪动。
:target 弹窗必须用 position: fixed，否则会随页面滚动消失
纯 CSS 弹窗靠的是 URL hash 变化触发 :target，但浏览器默认滚动行为会让弹窗“跟丢”位置。如果弹窗容器是 static 或 relative 定位，点击链接后页面跳转到锚点，弹窗就可能被滚出视口，甚至卡在顶部空白处。必须显式设为 fixed，并覆盖全屏区域（top: 0; left: 0; width: 100%; height: 100%），才能稳住位置。
常见错误写法：.modal { display: none; } → .modal:target { display: block; }。这会导致页面重排：弹窗出现时其他内容突然上移，遮罩层错位，关闭后页面又“弹回去”。更稳妥的做法是用 visibility: hidden + opacity: 0 + transition，保持 DOM 占位。
为什么 :target 关不掉弹窗？
点击遮罩或关闭按钮后，地址栏 hash 变成 # 或空字符串，但 :target 不匹配任何元素——这本身是对的。问题在于：如果关闭按钮的 href 是 #，而页面里恰好有个 id="" 或 id=" " 的元素（哪怕看不见），:target 就可能意外命中它，导致弹窗不隐藏。
立即学习“Java免费学习笔记（深入）”；
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 确保页面中没有空
id、空格id、或id=" "的元素 - 关闭按钮统一用
href="#"，且服务端/构建流程不生成带空id的 HTML - 兜底样式可加：
:target:not(#modal-1):not(#modal-2) { visibility: hidden; }，防误匹配
:target 弹窗的初始状态怎么处理？
页面刚加载时，若 URL 没有 hash，:target 不生效，弹窗默认隐藏——这是预期行为。但用户常希望“打开页面就显示某个弹窗”，比如隐私政策首次弹出。这时不能靠 :target 自动触发，必须干预 hash：
- 服务端渲染时直接输出
location.hash = "#privacy"（JS） - 或让入口链接带 hash：
https://example.com/#privacy - 纯静态页无法自动触发，只能靠用户点击第一个链接来启动
注意：history.pushState 或 location.hash = "xxx" 是 JS 行为，不属于 :target 能力范围，别指望纯 CSS 解决初始态。
移动端点击遮罩关闭失效的真因
在 iOS Safari 和部分 Android 浏览器中，点击 fixed 遮罩层（.overlay）有时不触发跳转，尤其是遮罩没设置 cursor: pointer 或没监听 click 区域时。根本原因不是 CSS，而是 <a href="#"> 默认行为被压制。
- 遮罩层必须是
<a>标签，不能只靠div+:target控制 - 给遮罩加
style="cursor: pointer;"，提升触摸响应率 - 避免遮罩内嵌套其他可点击元素（如按钮），否则事件冒泡干扰 hash 更新
最易被忽略的一点：所有弹窗 id 必须全局唯一，且不能和页面已有 fragment（如导航锚点）冲突——否则点导航可能意外打开弹窗，或弹窗关不掉。
