用 position: fixed 可纯 CSS 实现弹窗，通过 checkbox 控制显隐：遮罩层 fullview 固定定位，弹窗用 top:50%/left:50%/transform 居中，z-index 分层，label 模拟开关，兼容性好且无需 JS。
用 position: fixed 实现简单弹窗，是 CSS 初级项目中最直接、兼容性好、无需 JS 也能工作的方案之一（配合 checkbox 或 :target 伪类即可触发）。
核心思路：固定定位 + 遮罩层 + 内容居中
弹窗本质是一个脱离文档流、覆盖在页面上方的独立区域。fixed 定位让它始终相对于视口定位，滚动时也不偏移。
- 遮罩层（overlay）设
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; - 弹窗盒子（modal）也用
position: fixed;，通过top: 50%; left: 50%; transform: translate(-50%, -50%);精准居中 - 确保
z-index高于页面其他内容（如 1001），避免被遮挡
纯 CSS 控制显隐（推荐 checkbox 方案）
不用 JS，用隐藏的 checkbox + label 模拟开关，语义清晰、易维护：
- HTML 中放一个
和对应 - 弹窗结构包裹在 里，并设置
.modal { display: none; }- 利用
#modal-toggle:checked ~ .modal { display: block; }控制显示（注意兄弟选择器写法）基础样式示例（可直接复制调试）
以下是最简可用代码片段，含遮罩、居中弹窗、关闭按钮：
立即学习“前端免费学习笔记（深入）”；
这是弹窗内容
注意事项和小优化
实际使用时容易忽略但影响体验的点：
- 给弹窗内容加
max-width和margin: 0 auto，防止在窄屏下溢出 - 按 ESC 键关闭需 JS 支持，纯 CSS 方案暂不支持；若必须，可后续轻量添加
- 聚焦管理（无障碍）建议用 JS 补充，初级项目可先保证视觉可用
- 移动端注意加
viewport元标签，避免缩放导致 fixed 偏移
- 利用
