我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像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中的最终容器可以有多个固定元素，并且仍然具有与左上角相关的所有元素。但是，只有当它们都放在容器中的第一个位置时，这才是正确的，因为这一比较结果表明，如果分散在容器内容中，定位就会变得不可靠。
包装器在定位上是静态的、相对的还是绝对的，这无关紧要。
其他回答
如果容器使用某些包含规则，则可以将元素相对于其容器定位为固定位置。
<div class='parent'>
<div class='child'></div>
</div>
.parent {
contain: content;
}
.child {
position: fixed;
top: 0;
left: 0;
}
只需将顶部和左侧样式从固定位置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 */
/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">
<div class="im-fixed-within-my-container-div-zone">
my fixed content
</div>
</div>
/* css */
/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body
{
float: right;
}
.im-fixed-within-my-container-div-zone
{
position: fixed;
transform: translate(-100%);
}
两个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中的最终容器可以有多个固定元素，并且仍然具有与左上角相关的所有元素。但是，只有当它们都放在容器中的第一个位置时，这才是正确的，因为这一比较结果表明，如果分散在容器内容中，定位就会变得不可靠。
包装器在定位上是静态的、相对的还是绝对的，这无关紧要。
实现相对固定位置的另一个奇怪的解决方案是将容器转换为iframe，这样固定元素可以固定到容器的视口而不是整个页面。
