我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
我不得不用我的客户想坐在内容区之外的广告来做这件事。我只是简单地做了下面的事情，它就像一个魅力！
<div id="content" style="position:relative; width:750px; margin:0 auto;">
<div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
<a href="#" style="position:fixed;"><img src="###" /></a>
</div>
</div>
其他回答
事实上，这是可能的，而公认的答案只涉及集中，这很简单。此外，您真的不需要使用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。
使用纯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');
});
我很晚才回答这个问题，但我相信这也是一个未来普遍存在的问题，肯定会对未来的搜索者有所帮助。
这可以通过使用技巧来解决。我们可以在这里使用calc。在计算范围内，我们可以使用100个垂直宽度，减去宽度的90%，然后除以2。请根据您的需要更改90%。在您的情况下，它可以是100%或70%，这取决于您的具体要求。
.your-class {
position: fixed;
right: calc((100vw - 90%)/2);
}
这对我有用。请注意，在我的例子中，我希望浮动元素向右移动。如果你想在左边，请用左边而不是右边。
在这种情况下，可以根据父元素更改固定元素的位置。
可以使用以下代码获取父元素的位置。
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});
}
神奇的是将屏幕宽度减去容器宽度，然后除以2：
//1400px is according to container max-width (left can be also right)
.fixed {
position: fixed;
right: calc((100vw - 1400px)/2);
}
注意：css calc（）函数几乎不受支持，但不是100%受支持。对于大多数用例，它肯定得到了足够的支持。单击此处了解更多详细信息
代码段（有一个300px的容器，正好适合这个网站的小部件）：
.容器{最大宽度：300px；左边距：自动；右边距：自动；}.固定{位置：固定；右：计算（（100vw-300px）/2）；}@媒体屏幕和（最大宽度：300px）{右：0px；}<div style=“height:3000px”><div class=“container”><button class=“fixed”>固定含量</按钮>Lorem ipsum dolor坐在amet consectetur adipiscing elit。Laborum，eum？我要求最低限度，最低限度，最高限度，最低程度，最低限度-最低限度-最高限度！是否有责任追究责任？在过去的几年里，人们都在用鼻子和鼻子说话，用鼻子说话！在法庭的最高级别减去实验室的修改和体积后，法庭上的数字是相等的。加快我们的劳动时间，让我们一起努力，共同努力，共同奋斗，共同进步，共同进步！无论是什么样的物质解决方案，几乎没有人会在别名为auten pariator animi error的地方进行实验，也没有人会对实验结果进行验证！在dolorem ipsam eos porro magni出汗可能是主要的，它的脸。我们的过失是错误的，因为它排斥了可能的质量，asperiores earum ipsum interstias dicta sint fugit at que veniam dolorum illo？官方必须对所有人进行调查，调查结果表明，最大限度地减少自然灾害。所有人都坐着。</div></div>
