全屏覆盖层需用fixed定位和高z-index实现。1. 设position:fixed并设top、left、right、bottom为0使其撑满视口；2. 设置z-index>1000（如9999）确保层级最高；3. 可添加pointer-events控制交互，display:none控制显隐，结合JS动态操作。
要实现一个全屏覆盖层，关键在于正确使用 position 和 z-index。覆盖层常用于模态框、加载提示或页面遮罩，必须覆盖所有内容并铺满整个视口。
1. 使用 fixed 定位确保覆盖全屏
将覆盖层的 position 设置为 fixed，使其脱离文档流并相对于浏览器视口定位。这样即使页面滚动，覆盖层仍能保持全屏显示。
设置 top、right、bottom、left 为 0，可让元素自动撑满整个屏幕。
示例代码：.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
2. 利用 z-index 控制层级显示
z-index 决定元素在 Z 轴上的堆叠顺序。数值越大，越靠近用户。覆盖层需要比页面其他元素层级更高，才能真正“覆盖”。
立即学习“前端免费学习笔记（深入）”；
确保父容器没有创建新的层叠上下文导致 z-index 失效。一般将覆盖层直接放在 body 下，或确保其祖先元素 z-index 值较低。
建议值：- 普通内容：z-index: auto 或 0
- 导航栏/弹窗：z-index: 10~100
- 全屏覆盖层：z-index: 1000 以上（如 9999）
示例：
.overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6);
z-index: 9999;
}
3. 额外优化建议
为了让覆盖层更实用，可以添加以下特性：
- pointer-events: none; 可让覆盖层不阻挡交互，若需点击穿透
- pointer-events: auto; 配合点击关闭功能（如点击遮罩关闭弹窗）
- 添加 display: none; 或使用 class 控制显隐
- 结合 JavaScript 动态插入或移除覆盖层
基本上就这些。只要掌握 fixed 定位铺满屏幕，再用足够高的 z-index 确保层级优先，就能稳定实现全屏覆盖效果。不复杂但容易忽略细节。
