绝对定位子元素导致Section间出现额外间隙的原因及解决方法

问题原因 #

你看到的间隙本质上并非由floater直接导致，但它的存在让布局问题更明显：

1. 你的.section类默认设置了padding: 25px 15px 15px，第二个.section的padding-top:25px会在容器顶部留出空白区域——因为它的背景是透明，这个空白看起来就像和第一个.section之间的间隙。
2. 另外，floater未显式设置top:0; left:0;，它的初始定位是作为flex item在文档流中的默认位置，虽然绝对定位后脱离了文档流，但这个隐性的位置逻辑容易让你误以为间隙是它导致的。

解决办法 #

根据你的需求，有几种直接的消除方式：

方法1：调整第二个.section的内边距

直接去掉或修改第二个.section的顶部内边距：

.section:nth-child(even){
    background: transparent;
    padding-top: 0; /* 移除顶部内边距 */
}

方法2：给floater显式设置定位坐标

确保floater完全覆盖.section，避免隐性布局干扰：

.floater{
    position: absolute;
    background: #31ff0057;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 0; /* 强制定位到容器顶部 */
    left: 0; /* 强制定位到容器左侧 */
}

方法3：用负margin抵消内边距

如果需要保留.section的padding规则，可通过负margin让第二个.section向上移动：

.section:nth-child(even){
    background: transparent;
    margin-top: -25px; /* 抵消顶部padding的高度 */
}

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