必须用 position: fixed 且配合 visibility/opacity 切换显隐，禁用 display；需补全宽高、处理移动端 min-height、避免祖先 transform；警惕幽灵 ID 导致 :target 失效；:target 机制存在 iOS 延迟、哈希残留、多层冲突及无障碍缺陷，不适用于关键路径。
必须用 position: fixed，否则滚动时弹窗会消失或错位；不能用 display 切换显隐，否则动画失效、页面抖动。
弹窗容器必须设 position: fixed 且补全尺寸
浏览器锚点跳转会强制滚动页面，把匹配 :target 的元素滚到视口顶部。如果弹窗是 static 或 relative 定位，它就会被一起拖走——可能卡在顶部空白处，甚至完全滚出屏幕。
正确写法要同时声明：
position: fixedtop: 0; left: 0;width: 100%; height: 100%;- 移动端加
min-height: 100vh（防止内容短时遮罩塌陷） - 避免祖先元素带
transform（iOS Safari 中会干扰fixed定位）
:target 显隐必须用 visibility + opacity 组合
display 不可过渡，切换时触发重排：弹窗出现瞬间，下方内容上移；关闭后又“啪”地弹回原位，遮罩也常因此盖不住底层内容。
立即学习“前端免费学习笔记（深入）”；
推荐状态定义：
- 默认：
visibility: hidden; opacity: 0; -
#modal:target：visibility: visible; opacity: 1; - 加过渡：
transition: opacity 0.2s, visibility 0.2s; - 注意：
visibility: hidden仍占文档流位置，所以必须配合position: fixed+z-index，否则会空出白条
关闭按钮 href="# 后弹窗不消失？先查“幽灵 ID”
点击 href="#" 后弹窗没关，大概率不是 CSS 写错了，而是页面里存在空 ID：
-
id=""或id=" "（带空格） - 注释中残留的
id="xxx" - 构建工具（如 SSR 框架）注入的占位节点
浏览器把 # 当作匹配空 ID，:target 意外命中那个不可见元素，导致样式持续生效。
排查命令：$$('[id=""], [id=" "]')（控制台运行）
兜底方案（防漏）：:target:not(#modal-login):not(#modal-privacy) { visibility: hidden; }
移动端和 history 行为带来的硬伤
:target 在 iOS Safari 中重绘有时延迟，尤其配合 transform 动画时；用户按返回键会退回到上一个哈希状态，而不是“关闭弹窗”——这个行为无法拦截或覆盖。
更麻烦的是：
- 哈希残留：点开再点
href="#"，地址栏仍是#modal，第二次点击不触发:target - 多弹层冲突：两个弹窗共用同一哈希规则时，
:target无法区分谁该显示 - 无障碍缺失：无焦点管理、无
aria-modal、键盘Esc无效
这些不是写法问题，是 :target 机制本身的边界——别把它用在支付确认、表单提交这类关键路径上。
