我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
只需将顶部和左侧样式从固定位置div
<div id='body' style='height:200%; position: absolute; width: 100%; '>
<div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
<div id='content' style='position: fixed;'>content</div>
</div>
</div>
#content div将位于父div所在的位置，但将固定在那里。
其他回答
神奇的是将屏幕宽度减去容器宽度，然后除以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>
在这种情况下，可以根据父元素更改固定元素的位置。
可以使用以下代码获取父元素的位置。
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});
}
2019解决方案：您可以使用位置：粘性属性。
下面是一个示例CODEPEN，演示了用法以及它与位置的区别：fixed。
其行为说明如下：
具有粘性位置的元素基于用户的滚动位置来定位。它的作用基本上类似于position:relative，直到元素滚动超过特定偏移量，在这种情况下，它变成position:fixed。当它向后滚动时，它将返回到其先前（相对）位置。它影响页面中其他元素的流动，即占据页面上的特定空间（就像位置：相对）。如果它是在某个容器内定义的，则相对于该容器定位。如果容器有一些溢出（滚动），根据滚动偏移量，它将变为位置：固定。
因此，如果您想在容器内实现固定功能，请使用粘性。
实现相对固定位置的另一个奇怪的解决方案是将容器转换为iframe，这样固定元素可以固定到容器的视口而不是整个页面。
检查此项：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body style="width: 1000px !important;margin-left: auto;margin-right: auto">
<div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
</div>
<div id="1" style="width: 100%; height: 600px; background-color: #800000">
</div>
<div id="2" style="width: 100%; height: 600px; background-color: #100000">
</div>
<div id="3" style="width: 100%; height: 600px; background-color: #400000">
</div>
</body>
</html>
