文章讲解如何解决因背景元素未正确锚定而产生的意外白色空白区域，核心在于为 .bg div 显式声明 top: 0; left: 0;，确保其完全覆盖视口左上角，避免默认文档流偏移引发的视觉空隙。
文章讲解如何解决因背景元素未正确锚定而产生的意外白色空白区域，核心在于为 `.bg div` 显式声明 `top: 0; left: 0;`，确保其完全覆盖视口左上角，避免默认文档流偏移引发的视觉空隙。
在使用 position: fixed 创建全屏背景时，一个常见却容易被忽视的问题是：即使设置了 fixed，元素仍可能因缺少显式定位坐标而保留默认文档流位置行为，从而在页面顶部或左侧留下不可见但实际存在的空白区域（即“意外白块”）。
在你的代码中，.bg div 虽已设为 position: fixed 和 z-index: -1，但未指定 top 和 left 值。根据 CSS 规范，fixed 元素若无显式 top/right/bottom/left 声明，其偏移将回退到静态位置（static position），而该位置受父容器或文档流影响——这正是白块的根源：两个背景 <div> 实际并未真正贴合视口边缘，导致其下方/右侧暴露出 <code>body 或 main 的背景（通常是浏览器默认白色）。
✅ 正确做法是强制锚定背景元素到视口原点：
.bg div {
position: fixed;
z-index: -1;
top: 0; /* 关键：显式定义起始纵坐标 */
left: 0; /* 关键：显式定义起始横坐标 */
}同时需注意：由于你使用了 left: 50% 控制第二个背景色块的水平分割，第一个 div 占据左半屏（width: 50vw），第二个从 left: 50% 开始占据右半屏，二者拼接后应无缝覆盖整个视口宽度。此时 top: 0; left: 0; 确保第一块从左上角开始，第二块自然紧邻其右，彻底消除间隙。
立即学习“前端免费学习笔记（深入）”；
⚠️ 补充注意事项：
-
* { margin: 0; }已消除全局外边距，但请确认无其他隐式样式干扰（如<h1></h1>默认margin-top，建议对main h1单独重置）； -
main使用position: relative+top: 5vh; left: 5vh;是合理的居中偏移策略，但需确保其z-index: 1确实高于背景（当前z-index: -1已满足）； - 若后续需响应式适配，建议用
min-height: 100vh替代固定height: 100vh，避免内容溢出时布局断裂。
总结：fixed 不等于“自动贴边”，显式声明 top 和 left 是实现精准覆盖的必要条件。添加 top: 0; left: 0; 后，白块立即消失，蓝主区块将干净地悬浮于双色背景之上。
