本文讲解如何通过为固定定位的背景元素显式设置 top: 0; left: 0;，彻底消除因默认文档流偏移引发的意外白色空白区域。
本文讲解如何通过为固定定位的背景元素显式设置 top: 0; left: 0;，彻底消除因默认文档流偏移引发的意外白色空白区域。
在使用 position: fixed 创建全屏背景时，一个常见却易被忽视的问题是：即使设置了 fixed，元素仍可能未完全覆盖视口左上角，从而在主内容（如 <main></main>）周围露出白色空白——这并非来自 的 margin（已用 * { margin: 0; } 清除），而是因为 fixed 元素默认以“当前文档流位置”为基准进行固定，而非绝对锚定到视口原点。
在你的代码中，.bg div 虽设为 position: fixed，但缺少 top 和 left 声明，导致浏览器按其原始文档位置（即 <div class="bg"> 在 DOM 中的自然流位置）进行固定。由于 <code><main></main> 先于 .bg 出现且具有 top: 5vh; left: 5vh; 偏移，.bg 的两个子 <div> 实际被固定在了 <code><main></main> 偏移后的位置附近，未能铺满整个视口，最终在左上区域留下白色空隙（本质是 body 背景色）。
✅ 正确做法是：为所有 fixed 背景元素显式声明 top: 0; left: 0;，强制其锚定到视口左上角：
.bg div {
position: fixed;
top: 0; /* 关键修复：锚定到视口顶部 */
left: 0; /* 关键修复：锚定到视口左侧 */
z-index: -1;
}同时，确保 HTML 结构中 .bg 容器本身不引入额外偏移（它仅作语义分组，无需样式）。完整修正后的核心 CSS 片段如下：
立即学习“前端免费学习笔记（深入）”；
.bg div {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.bg div:nth-child(1) {
width: 50vw;
height: 100vh;
background-color: black;
}
.bg div:nth-child(2) {
width: 50vw;
height: 100vh;
background-color: var(--red);
left: 50%; /* 注意：此 left 是相对于视口的，因父级已 fixed + top/left=0 */
}⚠️ 注意事项：
- 不要依赖
fixed元素的默认位置——始终显式定义top/left/right/bottom； - 若需双色分屏效果（如本例），第二个
div的left: 50%是基于视口宽度计算的，与第一个div并列覆盖无间隙； -
z-index: -1确保背景置于<main></main>下方，但需注意：若<main></main>有opacity 或 <code>transform，可能触发新的层叠上下文，此时-1可能失效，应改用z-index: 0配合body { background: transparent; }等方案。
通过这一微小但关键的调整，即可精准控制背景覆盖范围，彻底告别意外白块。
