:target模态框默认跳顶是规范行为，需用fixed/absolute脱离文档流并显式声明非target状态；关闭用href="#_"更可靠；多模态须ID级隔离样式。
为什么 :target 模态框默认会“跳到顶部”
点击 <a href="#login"> 后，浏览器不仅触发 :target，还会尝试滚动到 #login 元素位置——哪怕它已设为 position: fixed。这不是 bug，是规范行为。
实操建议：
- 给模态容器加
position: fixed或absolute，彻底脱离文档流 - 避免在
<body>里放空的<div id="login">；若必须存在，确保它不在可视区（如top: -9999px），否则滚动仍可能发生 - 不推荐用
scroll-behavior: smooth或 JS 覆盖，那已脱离纯 CSS 范畴
:target 显示/隐藏必须显式声明非匹配状态
:target 只负责“匹配时做什么”，不会自动重置其他状态。常见错误是只写 #modal:target { display: block; }，结果页面加载后 #modal 一直可见，或关闭后残留空白占位。
正确写法必须成对出现：
立即学习“前端免费学习笔记（深入）”；
#modal { display: none; opacity: 0; visibility: hidden; transition: opacity 0.3s; }#modal:target { display: flex; opacity: 1; visibility: visible; }- 禁用
display: none → block的过渡动画（display不可过渡），改用opacity+visibility组合
关闭按钮 href="#_" 为什么比 href="#" 更可靠
点 href="#" 会让 URL 变成 /page#，但某些浏览器（尤其是 Safari）对空 fragment 的 :target 匹配不稳定，可能导致模态框不隐藏；而 href="#_" 指向一个不存在的 ID，强制退出当前 :target 状态，更可控。
配套要点：
- 页面最上方加一个不可见锚点：
<div id="_" aria-hidden="true" style="position: absolute; top: -9999px;"></div> - 关闭链接写成：
<a href="#_" class="close">×</a> - 不要用
href="javascript:;"——它不触发 hash 变更，:target完全失效
多个模态框共存时如何避免样式冲突
如果同时有 #login、#signup、#help，不能共用 .modal:target 这类泛化选择器——它们会互相覆盖，且无法精准控制单个显示。
必须为每个模态框单独写规则：
-
#login { display: none; }+#login:target { display: flex; } -
#signup { display: none; }+#signup:target { display: flex; } - 所有模态框共享基础样式（如遮罩层、圆角、z-index），但显隐逻辑必须 ID 级隔离
- 不建议用属性选择器如
[id^="modal-"]:target——IE 和旧 Safari 不支持，且可维护性差
真正难的不是写出能动的代码，而是接受它的边界：URL 哈希必然变化、无法拦截返回键、没有焦点管理、移动端重绘可能延迟。这些不是“优化点”，是设计前提。用之前先问一句：这个弹窗，用户刷新页面后还该开着吗？
