我正在尝试修复一个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 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>
你可以试试我的jQuery插件FixTo。
用法：
$('#mydiv').fixTo('#centeredContainer');
两个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中的最终容器可以有多个固定元素，并且仍然具有与左上角相关的所有元素。但是，只有当它们都放在容器中的第一个位置时，这才是正确的，因为这一比较结果表明，如果分散在容器内容中，定位就会变得不可靠。
包装器在定位上是静态的、相对的还是绝对的，这无关紧要。
是的，只要不设置固定元素的位置（顶部或左侧等），这是可能的（不过，您仍然可以使用边距设置相对位置）。西蒙·博斯（Simon Bos）不久前发布了这篇文章。
然而，不要期望固定元素与非固定亲属滚动。
请在此处查看演示。
我的项目是.NET ASP Core 2 MVC Angular 4模板和Bootstrap 4。将“粘性顶部”添加到第一行的主应用程序组件html（即app.component.html）中，效果如下：
<div class='流动粘性顶部'><div class='col-sm-12'><导航菜单顶部></nav菜单顶部></div></div><div class=“row”><div class='col-sm-3'><nav menu></nav menu></div><div class='col-sm-9正文内容'><路由器出口></路由器出口></div></div>
这是惯例还是我把它简化了？
