固定定位下如何实现侧边栏置头部上方及内容全屏显示

问题1：让黑色侧边栏显示在绿色头部上方 #

fixed定位元素的堆叠顺序默认由HTML中的渲染顺序决定——后出现的元素层级更高。要让侧边栏（screenLeft）盖在头部（screenTop）上方，给screenLeft设置更高的z-index值即可：

修改后的CSS代码：

.screen {
    position: fixed;
    background: black;
}
#screenTop {
    height: 100px;
    width: 100%;
    background: green;
}
#screenLeft {
    height: 100%;
    width: 100px;
    z-index: 1; /* 给侧边栏设置更高层级 */
}
#screenTop { top: 0; }
#screenLeft { left: 0; }

#content {
    margin: 100px;
}

问题2：侧边栏和头部隐藏后让content铺满屏幕 #

要实现这个效果，需要做以下调整：

• 清除html和body的默认内外边距，避免页面留白
• 移除content的margin值
• 设置content的宽高占满整个视口，用box-sizing: border-box防止内边距/边框超出宽高范围

修改后的CSS代码：

/* 新增：清除根元素默认样式，确保视口无留白 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.screen {
    position: fixed;
    background: black;
}
#screenTop {
    height: 100px;
    width: 100%;
    background: green;
}
#screenLeft {
    height: 100%;
    width: 100px;
}
#screenTop { top: 0; }
#screenLeft { left: 0; }

#content {
    margin: 0; /* 移除原有外边距 */
    height: 100vh; /* 占满视口高度 */
    width: 100%; /* 占满视口宽度 */
    box-sizing: border-box; /* 确保内边距/边框不影响宽高 */
}

当给.screen添加display: none后，content就会自动铺满整个屏幕。

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