我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
2019解决方案：您可以使用位置：粘性属性。
下面是一个示例CODEPEN，演示了用法以及它与位置的区别：fixed。
其行为说明如下：
具有粘性位置的元素基于用户的滚动位置来定位。它的作用基本上类似于position:relative，直到元素滚动超过特定偏移量，在这种情况下，它变成position:fixed。当它向后滚动时，它将返回到其先前（相对）位置。它影响页面中其他元素的流动，即占据页面上的特定空间（就像位置：相对）。如果它是在某个容器内定义的，则相对于该容器定位。如果容器有一些溢出（滚动），根据滚动偏移量，它将变为位置：固定。
因此，如果您想在容器内实现固定功能，请使用粘性。
其他回答
两个HTML元素和纯CSS（现代浏览器）
请参见这个jsFiddle示例。调整大小并查看固定元素如何随浮动元素一起移动。使用最内侧的滚动条查看滚动在站点上的工作方式（固定元素保持固定）。
正如这里许多人所说的，一个键没有在固定元素上设置任何位置设置（没有上、右、下或左值）。
相反，我们将所有固定元素（注意最后一个框中有四个元素）放在要放置的框中，如下所示：
<div class="reference">
<div class="fixed">Test</div>
Some other content in.
</div>
然后我们使用margin-top和margin-left相对于容器“移动”它们，就像这个CSS所做的那样：
.fixed {
position: fixed;
margin-top: 200px; /* Push/pull it up/down */
margin-left: 200px; /* Push/pull it right/left */
}
注意，因为固定元素忽略了所有其他布局元素，所以fiddle中的最终容器可以有多个固定元素，并且仍然具有与左上角相关的所有元素。但是，只有当它们都放在容器中的第一个位置时，这才是正确的，因为这一比较结果表明，如果分散在容器内容中，定位就会变得不可靠。
包装器在定位上是静态的、相对的还是绝对的，这无关紧要。
事实上，这是可能的，而公认的答案只涉及集中，这很简单。此外，您真的不需要使用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。
我也有同样的问题，我们的一个团队成员给了我一个解决方案。为了允许div定位并相对于其他div，我们的解决方案是使用父容器包装固定div和滚动div。
.容器{位置：相对；挠曲：1；显示：柔性；}.修复{位置：绝对；}<div class=“container”><div class=“scroll”></div><div class=“fix”></div></div>
只需将顶部和左侧样式从固定位置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所在的位置，但将固定在那里。
如果您使用JavaScript，这是可能的。在本例中，jQuery插件Sticky Kit：
