本文讲解如何解决因背景元素未正确锚定而导致主内容区域（如 main）偏移后暴露白色空白的问题，核心是为 .bg div 显式设置 top: 0; left: 0;，确保背景层完全覆盖视口。
本文讲解如何解决因背景元素未正确锚定而导致主内容区域（如 main）偏移后暴露白色空白的问题，核心是为 .bg div 显式设置 top: 0; left: 0;，确保背景层完全覆盖视口。
在使用 position: fixed 创建全屏背景时，一个常见误区是认为元素默认从视口左上角（0, 0）开始定位。但实际上，fixed 元素的初始定位基准是其最近的已定位祖先（或视口），但若未显式声明 top/left，其偏移量将继承文档流中的自然位置（即可能受默认布局影响）。在你的代码中，.bg div 缺少 top: 0; left: 0;，导致两个 fixed 背景 <div> 并未真正铺满整个视口——它们可能因浏览器默认行为或隐式偏移而留出空白区域，当 <code>main 元素通过 top: 5vh; left: 5vh; 向右下偏移时，这部分未被覆盖的“背景空缺”就以白色（即 body 或 html 的默认背景色）显现出来。
✅ 正确做法是在 .bg div 的基础样式中强制重置定位起点：
.bg div {
position: fixed;
z-index: -1;
top: 0; /* 关键：锚定到视口顶部 */
left: 0; /* 关键：锚定到视口左侧 */
}同时，保持其余结构不变即可。完整修复后的 CSS 如下：
:root {
--red: rgb(218, 39, 39);
}
* {
margin: 0;
padding: 0; /* 建议补充：防止某些元素自带 padding 影响布局 */
box-sizing: border-box;
}
body {
overflow-x: hidden;
background-color: white; /* 显式定义 body 背景色，避免意外透出 */
}
.bg div {
position: fixed;
z-index: -1;
top: 0;
left: 0;
}
.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%;
}
main {
position: relative;
width: 100vw;
height: 90vh;
z-index: 1;
top: 5vh;
left: 5vh;
background-color: blue;
border-radius: 25px;
}? 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 即使使用
fixed，也必须显式声明top和left（或right/bottom）才能精确控制起始位置；依赖“默认位置”在复杂布局中极易失效。 - 建议统一添加
box-sizing: border-box和padding: 0，避免部分浏览器对body或div的默认内边距干扰视觉一致性。 - 若后续需响应式适配，可考虑用
inset: 0替代top/left/right/bottom: 0，语义更简洁（兼容性：Chrome 89+、Firefox 95+、Safari 14.5+）。
通过这一微小但关键的修正，背景双色区块将严丝合缝地铺满整个视口，main 的偏移将完全叠加于纯色背景之上，彻底消除“意外白块”。
