使用CSS实现左右区块差异化滚动：左侧固定右侧可滚动

你遇到的问题是因为position:fixed会让元素脱离文档流，flex容器无法再为它预留宽度空间，导致右侧区块会向左偏移，被固定的左侧区块覆盖。下面提供两种可行的解决方法：

方法一：使用position:sticky（推荐） #

这种方法不需要让元素脱离文档流，flex布局的宽度分配依然有效，实现起来更简单：

修改后的CSS代码：

.container{
    display: flex;
}

.left{
    background-color: blueviolet;
    width: 50%;
    position: sticky;
    top: 0; /* 必须设置top值才能触发粘性定位 */
    height: 100vh; /* 可选，让左侧占满视口高度，确保内容较短时也能保持固定 */
}

.right{
    background-color: rgb(43, 183, 226);
    display: flex;
    flex-direction: column;
}

img{
    width:40%;
}

原理：sticky元素会在滚动到指定位置后固定，但始终保留在文档流中的原始位置，flex容器依然会为它分配50%的宽度，右侧区块不会被覆盖。

方法二：使用position:fixed并调整右侧布局 #

如果必须使用fixed，需要手动为右侧区块留出左侧固定元素的宽度：

修改后的CSS代码：

.container{
    display: flex;
}

.left{
    background-color: blueviolet;
    width: 50%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh; /* 让左侧占满视口高度 */
}

.right{
    background-color: rgb(43, 183, 226);
    display: flex;
    flex-direction: column;
    margin-left: 50%; /* 为左侧固定区块留出宽度 */
    width: 50%; /* 保持和左侧一致的宽度比例 */
}

img{
    width:40%;
}

原理：fixed元素脱离文档流后，flex容器不再为它分配空间，通过给右侧区块设置margin-left:50%，让它避开左侧固定元素的区域，同时设置宽度保证布局比例和原设计一致。

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