事实上，这是可能的，而公认的答案只涉及集中，这很简单。此外，您真的不需要使用JavaScript。

这将允许您处理任何情况：

如果您想在position:relative容器中定位：absolute，请按照您的意愿设置所有内容，然后在div中创建一个新的固定位置div，其位置为：absolate，但不要设置其顶部和左侧的财产。然后，它将被固定在相对于容器的任何位置。

例如：

/*主要场地主体*/.包装器{宽度：940px；边距：0自动；位置：相对；/*确保绝对定位的子元素相对于此*/}/*要固定位置的元素的绝对定位包装*/.固定包装{宽度：220px；位置：绝对；顶部：0；左：-240px；/*将其移到网站正文的左侧，留下20px的空白*/}/*要固定其位置的元素*/.固定{宽度：220px；位置：固定；/*不要设置顶部/左侧*/}<div class=“wrapper”><div class=“fixed wrapper”><div class=“fixed”>这里的内容将是固定位置，但在网站主体左侧240像素。</div></div></div>

可悲的是，我希望这个线程可以解决我的问题，Android的WebKit将框阴影模糊像素渲染为固定位置元素的边距，但这似乎是一个bug。

根据我的经验，处理此问题的最佳方法是将元素踢出父元素。

position:sticky不适合我，因为它没有固定在滚动上，position:absolute不令人满意，因为它将它从文档流中删除。

我所做的只是将元素放在与父元素相同的级别（以便它们是兄弟）。这样，它固定在元素上方，不会从流中取出。不需要额外的复杂css或js。

在这种情况下，可以根据父元素更改固定元素的位置。

可以使用以下代码获取父元素的位置。

function coordinatesSetter() {
    var elm = $('parentElement');
    var rect = elm.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    return {top: rect.top + scrollTop, left: rect.left + scrollLeft});
 }

我很晚才回答这个问题，但我相信这也是一个未来普遍存在的问题，肯定会对未来的搜索者有所帮助。

这可以通过使用技巧来解决。我们可以在这里使用calc。在计算范围内，我们可以使用100个垂直宽度，减去宽度的90%，然后除以2。请根据您的需要更改90%。在您的情况下，它可以是100%或70%，这取决于您的具体要求。

.your-class {
  position: fixed;
  right: calc((100vw - 90%)/2);
}

这对我有用。请注意，在我的例子中，我希望浮动元素向右移动。如果你想在左边，请用左边而不是右边。

这很简单（根据下面的HTML）

技巧是不要在元素（div）上使用“position:fixed；”的top或left。如果未指定这些元素，则“fixed content”元素将显示为相对于封闭元素（具有“position:RELATIVE；”的div）INSTEAD OF相对于浏览器窗口！！！

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

上面的内容允许我在垂直滚动的div中的许多文本的顶部找到一个关闭的“X”按钮。“X”位于适当位置（不会随滚动文本移动，但当用户调整浏览器窗口的宽度时，它会随包围div容器向左或向右移动！因此，它垂直“固定”，但相对于包围元素水平定位！

在我开始工作之前，当我向下滚动文本内容时，“X”向上滚动并消失。

很抱歉没有提供我的javascript hideDiv（）函数，但这将不必要地延长这篇文章的篇幅。我选择了尽量缩短。

使用纯CSS，你无法做到这一点；至少我没有。然而，您可以非常简单地使用jQuery来实现。我会解释我的问题，稍加改动你就可以使用了。

因此，首先，我希望我的元素有一个固定的顶部（从窗口顶部），以及一个从父元素继承的左侧组件（因为父元素居中）。要设置左侧组件，只需将元素放到父元素中，并设置父元素的位置：relative。

然后，您需要知道当滚动条位于顶部（y为零滚动）时，元素距离顶部的距离是多少；还有两种选择。首先，它是静态的（一些数字），或者必须从父元素中读取它。

在我的例子中，它距离顶部静态图像150像素。所以，当你看到150时，它是当我们没有滚动时，元素从顶部开始的数量。

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});