HTML/CSS中100%宽度Div定位问题：固定定位致元素偏移

当你把红色块的position设为fixed后，这个元素会脱离正常文档流，不再占据原本在页面里的空间，所以下面的蓝、绿块会自动向上移动，填补红色块空出来的位置。以下是几种实用的解决方法：

方案1：给蓝色块添加上边距 #

直接给蓝色块设置等于红色块高度的margin-top，把它往下推回到原来的位置：

.color-stripblue {
    display: block;
    height: 20px;
    width: 100%;
    background-color: blue;
    left: 0;
    margin-top: 20px; /* 添加这一行，值和红色块高度一致 */
}

方案2：添加占位元素保留文档流空间 #

在红色块后面加一个和它高度一致的空div，用来占据原本红色块的位置，这样蓝、绿块就不会上移：
修改后的HTML结构：

<div class="color-stripred"></div>
<div class="fixed-placeholder"></div> <!-- 新增占位div -->
<div class="color-stripblue"></div>
<div class="color-stripgreen"></div>

对应的CSS：

.fixed-placeholder {
    height: 20px; /* 和红色块高度保持一致 */
}

方案3：给body添加上边距 #

如果不想修改元素结构或单个块的样式，可以给body设置等于红色块高度的margin-top，让整个页面内容向下偏移，避开fixed定位的红色块：

body {
    margin: 0; /* 先重置浏览器默认的body边距，避免冲突 */
    margin-top: 20px; /* 向下偏移20px，匹配红色块高度 */
}

内容的提问来源于stack exchange，提问作者kitchen800