如何用CSS Grid实现左侧列粘性定位？附问题排查

问题根源 #

你遇到的核心问题是：当html或body标签设置overflow-x: hidden时，position: sticky无法正常生效。你的原代码中，虽然给左侧列配置了align-self: start; position: sticky; top: 0;，但根元素的overflow设置破坏了粘性定位的工作机制。

修复方案 #

将overflow-x: hidden从html和body上移除，移到main容器中，保留其他原有设置即可：

/* 移除html和body的overflow-x:hidden */
/* html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
} */

/* 未使用Grid的header */
.header {
    background-color: #ccc;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* 两列Grid容器 - 新增overflow-x:hidden */
main {
    display: grid;
    grid-template-columns: 1fr 2fr;
    overflow-x: hidden;
}

/* 左侧列 - 保留原粘性定位设置 */
.author-column {
    background-color: yellow;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-self: start;
    position: sticky;
    top: 0;
}

/* 右侧列 */
.content-column {
    background-color: aqua;
    display: flex;
    flex-direction: column;
}

原理说明 #

position: sticky的生效依赖最近的可滚动祖先元素（即设置了overflow属性且值不为visible的元素）。当你在html/body上设置overflow-x: hidden时，浏览器会把整个页面作为滚动容器，而左侧列嵌套在main容器内，导致粘性定位的触发逻辑被打乱。

把overflow-x: hidden移到main容器后，既满足了横向内容隐藏的需求，又让sticky元素的滚动上下文正确绑定到main，左侧列就能正常实现粘性定位了。另外你怀疑的header的position: relative并不会影响粘性定位，无需调整。

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