双列粘性滚动布局问题求助：粘性元素失效及容器高度适配

核心问题是当左侧文本容器设为position: relative时，它会占据文档流空间，打破原有绝对定位布局，导致右侧元素被挤到下方。同时position: sticky需要正确的布局上下文和触发条件才能生效，以下是具体调整方案：

1. 用Flex布局实现并列双列 #

将封面容器设置为Flex布局，让左右两列自然并列，同时左侧文本列会自动撑开容器高度，完美适配不同屏幕尺寸：

.two_column_cover {
  position: relative; /* 作为粘性元素的定位上下文 */
  display: flex;
  gap: 2rem; /* 自定义两列间距，避免重叠 */
}

2. 调整左侧文本列样式 #

移除左侧文本列的position属性，让它在Flex布局中正常占据空间，从而控制容器高度：

.two_column_cover_text {
  width: 50%; /* 根据需求设置宽度，比如占容器一半 */
  /* 移除原有的position: absolute/relative */
}

3. 修复右侧粘性元素 #

给右侧元素设置position: sticky并指定top值（触发粘性的必要条件），同时通过align-self: flex-start确保它从容器顶部开始定位：

.two_column_cover_sticky {
  position: sticky;
  top: 0; /* 必须设置该值才能触发粘性效果 */
  width: 50%; /* 与左侧文本列宽度匹配 */
  align-self: flex-start;
}

原理说明 #

• Flex布局替代了原有的绝对定位布局，既保证两列并列，又让左侧文本自然撑开容器高度，避免间隙或溢出问题
• position: sticky的生效依赖两个条件：父容器不能有overflow: hidden等截断属性，且必须指定top/bottom等偏移值
• 封面容器的position: relative确保粘性元素的定位上下文是封面容器，而非整个页面，符合你“在封面容器范围内滚动时固定”的需求

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