我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
答案是肯定的，只要在将div位置设置为固定后不设置left:0或right:0。
http://jsfiddle.net/T2PL5/85/
签出侧边栏div.它是固定的，但与父级相关，而不是窗口视图点。
正文{背景：#ccc；}.包装器{边距：0自动；高度：1400px；宽度：650px；背景：绿色；}.侧边栏{背景色：#ddd；浮动：左侧；宽度：300px；高度：100px；位置：固定；}.主要{浮动：右侧；背景色：黄色；宽度：300px；高度：1400px；}<div class=“wrapper”>包装器<div class=“sidebar”>侧边栏</div><div class=“main”>main</div></div>
其他回答
为了实现与请求的“相对于容器的固定位置”类似的目的，对我来说，position:fixed不起作用，因为当我滚动页面时，元素保持在固定位置，但您可以使用溢出功能实现类似的效果。
在下面的狙击中，检查标题在父容器中是如何固定的，但是当你滚动主体时，它也会滚动
#爷爷{宽度：100vw；高度：120vh；背景色：rgb（236、233、233）；溢出：隐藏；}#父母{宽度：200px；高度：200px；背景色：青色；溢出：隐藏；}#儿童1{填充：1em}#儿童2{高度：100px；背景色：卡其色；overflow-y：滚动；}<div id=“爷爷”><div id=“parent”><div id=“child1”>标题</div><div id=“child2”><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p></div></div></div>
2019解决方案：您可以使用位置：粘性属性。
下面是一个示例CODEPEN，演示了用法以及它与位置的区别：fixed。
其行为说明如下：
具有粘性位置的元素基于用户的滚动位置来定位。它的作用基本上类似于position:relative，直到元素滚动超过特定偏移量，在这种情况下，它变成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所在的位置，但将固定在那里。
这很简单（根据下面的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（）函数，但这将不必要地延长这篇文章的篇幅。我选择了尽量缩短。
事实上，这是可能的，而公认的答案只涉及集中，这很简单。此外，您真的不需要使用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。
