粘性元素滚动直接父级长度后失效的问题求助

嘿，我帮你排查了这个问题，核心原因是对sticky定位的上下文理解有偏差，咱们先理清楚问题出在哪，再给你看修复好的代码：

问题根源 #

你现在把粘性元素（.sticky-side/.sticky）放在了设置了position:relative的.row里面，而sticky定位的参考对象是最近的、要么设置了非static定位要么有滚动溢出的祖先元素。

这里.row既没有设置溢出属性，还额外加了relative定位，直接导致粘性元素的「粘性」是相对于.row本身的——当外层.main-grid滚动时，整个.row作为一个宽元素在滚动容器里移动，粘性元素自然会跟着.row一起被滚出视图。

修复方案 #

要让粘性元素相对于滚动容器（.main-grid）固定，只需要调整几个关键点：

• 移除.row的position:relative，避免它干扰粘性元素的定位上下文
• 给.main-grid加上position:relative，明确它作为粘性元素的参考容器
• 给最左侧的粘性元素补全左边框，保证样式和其他单元格统一

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修复后的粘性网格</title>
    <style>
        html, body { 
            height: 100%; 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
        } 
        .center-container { 
            min-height: 100vh; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
        } 
        .main-grid { 
            display: flex; 
            flex-direction: column; 
            gap: 8px; 
            background: #f8f8f8; 
            padding: 24px; 
            border-radius: 12px; 
            box-shadow: 0 2px 8px rgba(0,0,0,0.06); 
            max-width: 500px; 
            overflow-x: auto;
            /* 明确作为粘性元素的定位参考容器 */
            position: relative;
        } 
        .row { 
            display: grid; 
            grid-template-columns: repeat(10, 120px); 
            /* 移除干扰粘性定位的relative属性 */
            /* position: relative; */
            background: #fff; 
            border-radius: 6px; 
        } 
        .cell { 
            padding: 12px 16px; 
            border-right: 1px solid #eee; 
            border-bottom: 1px solid #eee; 
            background: inherit; 
            z-index: 1; 
        } 
        .row .cell:last-child { border-right: none; } 
        .row:last-child .cell { border-bottom: none; } 
        .sticky-side { 
            position: sticky; 
            left: 0; 
            background: #e0e7ef; 
            z-index: 2;
            /* 补全左边框，和其他单元格样式统一 */
            border-left: 1px solid #eee;
        } 
        .sticky { 
            position: sticky; 
            left: 120px; 
            background: #d1e7dd; 
            z-index: 2; 
        }
    </style>
</head>
<body>
    <div class="center-container">
        <div class="main-grid">
            <div class="row">
                <div class="cell sticky-side">Sticky 1A</div>
                <div class="cell sticky">Sticky 1B</div>
                <div class="cell">Cell 1C</div>
                <div class="cell">Cell 1D</div>
                <div class="cell">Cell 1E</div>
                <div class="cell">Cell 1F</div>
                <div class="cell">Cell 1G</div>
                <div class="cell">Cell 1H</div>
                <div class="cell">Cell 1I</div>
                <div class="cell">Cell 1J</div>
            </div>
            <div class="row">
                <div class="cell sticky-side">Sticky 2A</div>
                <div class="cell sticky">Sticky 2B</div>
                <div class="cell">Cell 2C</div>
                <div class="cell">Cell 2D</div>
                <div class="cell">Cell 2E</div>
                <div class="cell">Cell 2F</div>
                <div class="cell">Cell 2G</div>
                <div class="cell">Cell 2H</div>
                <div class="cell">Cell 2I</div>
                <div class="cell">Cell 2J</div>
            </div>
            <div class="row">
                <div class="cell sticky-side">Sticky 3A</div>
                <div class="cell sticky">Sticky 3B</div>
                <div class="cell">Cell 3C</div>
                <div class="cell">Cell 3D</div>
                <div class="cell">Cell 3E</div>
                <div class="cell">Cell 3F</div>
                <div class="cell">Cell 3G</div>
                <div class="cell">Cell 3H</div>
                <div class="cell">Cell 3I</div>
                <div class="cell">Cell 3J</div>
            </div>
        </div>
    </div>
</body>
</html>

效果验证 #

现在滚动.main-grid的时候，左边的Sticky 1A/2A/3A和Sticky 1B/2B/3B会一直固定在容器左侧，不会跟着滚动消失啦～

内容来源于stack exchange