这是一个旧的帖子，但我将留下我的javascript解决方案，以防有人需要它。

// you only need this function function sticky( _el ){ _el.parentElement.addEventListener("scroll", function(){ _el.style.transform = "translateY("+this.scrollTop+"px)"; }); } // how to make it work: // get the element you want to be sticky var el = document.querySelector("#blbl > div"); // give the element as argument, done. sticky(el); #blbl{ position:relative; height:200px; overflow: auto; background: #eee; } #blbl > div{ position:absolute; padding:50px; top:10px; left:10px; background: #f00 } <div id="blbl" > <div><!-- sticky div --></div> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> </div>

笔记

我使用transform: translateY(@px)，因为它应该是轻量级的计算，高性能的动画 我只在现代浏览器中尝试了这个功能，它不适用于需要供应商的旧浏览器(当然还有IE)

这个解决方案对我很有效!参考原文的详细答案:https://stackoverflow.com/a/11833892/5385623

.level1 { 位置:相对; ｝ .level2 { 位置:绝对的; ｝ .level3 { 位置:固定; /*不要设置顶部/左侧!* / ｝ < div class = '使' > < div class =“二级”> < div class = ' level3 ' > 内容 < / div > < / div > < / div >

让我来回答这两个可能的问题。请注意，你现有的标题(和原始帖子)提出的问题与你在编辑和后续评论中寻求的问题不同。

要将一个元素相对于父元素进行“固定”定位，您需要在子元素上使用position:absolute，并且在父元素上使用除默认或静态之外的任何位置模式。

例如:

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

这将使childDiv元素相对于parentDiv的位置向左放置50像素，向下放置20像素。

要将一个元素相对于窗口定位为“固定”，您需要position:fixed，并且可以使用top:、left:、right:和bottom:来定位您认为合适的位置。

例如:

#yourDiv { position:fixed; bottom:40px; right:40px; }

这将使yourDiv相对于浏览器窗口的位置固定，距离底部边缘40像素，距离右侧边缘40像素。

这是一个旧的帖子，但我将留下我的javascript解决方案，以防有人需要它。

// you only need this function function sticky( _el ){ _el.parentElement.addEventListener("scroll", function(){ _el.style.transform = "translateY("+this.scrollTop+"px)"; }); } // how to make it work: // get the element you want to be sticky var el = document.querySelector("#blbl > div"); // give the element as argument, done. sticky(el); #blbl{ position:relative; height:200px; overflow: auto; background: #eee; } #blbl > div{ position:absolute; padding:50px; top:10px; left:10px; background: #f00 } <div id="blbl" > <div><!-- sticky div --></div> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> </div>

笔记

我使用transform: translateY(@px)，因为它应该是轻量级的计算，高性能的动画 我只在现代浏览器中尝试了这个功能，它不适用于需要供应商的旧浏览器(当然还有IE)

首先，设置位置:固定和左侧:50%，其次-现在你的起点是一个中心，你可以设置新的位置与边缘。

通过多个divs，我成功地获得了固定的y和绝对的x divs。 在我的情况下，我需要一个div在左右两侧，对齐到一个中心1180px宽度的div。

    <div class="parentdiv" style="
        background: transparent;
        margin: auto;
        width: 100%;
        max-width: 1220px;
        height: 10px;
        text-align: center;">
        <div style="
            position: fixed;
            width: 100%;
            max-width: 1220px;">
            <div style="
                position: absolute;
                background: black;
                height: 20px;
                width: 20px;
                left: 0;">
            </div>
            <div style="
                width: 20px;
                height: 20px;
                background: blue;
                position: absolute;                                           
                right: 0;">
            </div>
        </div>
    </div>