左侧设置position:fixed侧边栏时右侧content被遮盖下移问题求助

问题原因 #

.Sidepanel设置position: fixed后会脱离正常文档流，原有float: left属性失效，浏览器不会为侧边栏预留排版空间，.content容器默认从页面最左侧开始渲染，因此出现重叠或错位到侧边栏下方的问题。

解决方案 #

按以下步骤修改CSS即可同时保留侧边栏固定效果和正常布局：

1. 给侧边栏设置明确宽度，删除无效的float: left属性，补充定位参数避免偏移
2. 给.content设置左侧内边距，数值等于侧边栏的总占位宽度（侧边栏宽度+左右padding），同时配置主体内容居中规则

修改后的完整CSS代码 #

.Sidepanel {
    background-color: #5555FF;
    padding: 1em;
    width: 200px; /* 放开注释设置明确宽度，可根据需求调整 */
    height: 100vh; /* 用100vh替代%保证始终占满视口高度，兼容性更好 */
    overflow: auto;
    position: fixed;
    left: 0;
    top: 0; /* 固定在左上角，避免页面偏移导致侧边栏错位 */
}
.Sidepanel div {
    margin: 5% 0 5% 0;
}
a {
    color: black;
    font-size: calc(1em + 1vw);
}

body {
    margin: 0
}

.content {
  padding-left: calc(200px + 2em); /* 预留侧边栏占位空间，2em为侧边栏左右padding总和 */
  max-width: 1000px; /* 可根据需求调整主体内容最大宽度 */
  margin: 0 auto; /* 主体内容在剩余可视区域居中 */
  box-sizing: border-box;
  -webkit-columns: 2 200px;
  -moz-columns: 2 200px;
  columns: 2 200px;
}
.content img {
    width: 90%;
    object-fit: cover;
}

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