HTML布局中左侧边栏div无法上移对齐的间隙问题排查

• 你给侧边栏.leftdiv设置了position: absolute绝对定位，但没有指定top: 0的顶部偏移值，浏览器会默认把绝对定位元素放在它在正常文档流中原本的位置——也就是头部div的下方，因此出现了和头部高度一致的顶部间隙。
• 现有布局混用margin偏移、绝对定位的方式，没有给页面设置统一的定位上下文，除了当前的间隙问题，后续还会出现侧边栏遮挡页脚、高度不匹配、宽度溢出的衍生问题。

不需要改动HTML结构，只需要替换对应CSS规则即可，修改后的完整CSS如下：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: blanchedalmond;
    position: relative;
}

/* head div start */
.head{
    width: 80%;
    margin-left: 20%;
}
.headelement{
    background-color: rgb(115, 182, 240);
    height: auto;
}
/* head div end */

/* Left Side Bar Start */
.leftsidebar{
    display: flex;
}
.leftdiv{
    position: absolute;
    width: 20%;
    top: 0;
    left: 0;
    min-height: 100vh;
}
.leftelement{
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-color: rgb(213, 233, 233);   
}
/* Left Side Bar end */

/* welcome div start  */
.welcomeDiv{
    width: 80%;
    margin-left: 20%;
    position: relative;
}
.welcomeelement{
    width: auto;
    height: auto;
    background-color: rgb(193, 45, 196);
}
/* welcome div end  */

/* Inner 2 div start */
.innerdiv{
    display: flex;
    width: 80%;
    height: auto;
    margin-left: 20%;
    position: relative;
}
.innerelement1{
    width: 50%;
    height: auto;
    background-color: rgb(65, 225, 37); 
}
.innerelement2{
    width: 50%;
    height: auto;
    background-color: rgb(226, 108, 23);
}
/* Inner 2 div end */

/* Footer div start */
.footerdiv{
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}
.footerelement{
    width: 100%;
    height: auto;
    background-color: rgb(132, 113, 122);
}
/* Footer div end */

修改完成后，左侧边栏会严丝合缝对齐到截图中红色叉号标注的页面左上角位置，顶部间隙完全消失，同时修复了侧边栏遮挡全屏页脚的潜在问题。

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