我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
我的项目是.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>
这是惯例还是我把它简化了？
其他回答
是的，根据规格，有办法。
虽然我同意格雷姆·布莱克伍德的答案应该是公认的，因为它实际上解决了这个问题，但应该注意的是，固定元素可以相对于其容器定位。
我无意中注意到在申请时
-webkit-transform: translateZ(0);
相对于身体，它创建了一个固定的子对象（而不是视口）。所以我左边的固定元素和顶部的财产现在是相对于容器的。
所以我做了一些研究，发现这个问题已经被埃里克·迈耶（Eric Meyer）所涵盖，即使这感觉像是一个“把戏”，但事实证明这是规范的一部分：
对于布局由CSS框模型控制的元素，任何值如果转换结果为“无”，则会同时创建堆叠上下文和包含块。该对象充当包含用于固定定位子体的块。
http://www.w3.org/TR/css3-transforms/
因此，如果对父元素应用任何变换，它将成为包含块。
但是
问题是，实现似乎有问题/有创意，因为元素也停止了固定的行为（即使这一点似乎不是规范的一部分）。
同样的行为在Safari、Chrome和Firefox中都可以找到，但在IE11中没有（其中固定元素仍然保持固定）。
另一件有趣的（未记录的）事情是，当一个固定元素包含在一个转换的元素中时，虽然它的顶部和左侧财产现在将与容器相关，但考虑到方框大小属性，它的滚动上下文将扩展到元素的边界，就像方框大小设置为border-box一样。对于一些有创意的人来说，这可能会成为一件玩物：）
TEST
如果您使用JavaScript，这是可能的。在本例中，jQuery插件Sticky Kit：
根据我的经验，处理此问题的最佳方法是将元素踢出父元素。
position:sticky不适合我，因为它没有固定在滚动上，position:absolute不令人满意，因为它将它从文档流中删除。
我所做的只是将元素放在与父元素相同的级别（以便它们是兄弟）。这样，它固定在元素上方，不会从流中取出。不需要额外的复杂css或js。
位置：粘滞，这是一种新的定位元素的方法，在概念上类似于位置：固定。不同之处在于，在视口中满足给定的偏移阈值之前，具有position:sticky的元素在其父元素中的行为类似于position:relative。
在Chrome 56中（目前为2016年12月的测试版，2017年1月稳定）：粘性现在又回来了。
https://developers.google.com/web/updates/2016/12/position-sticky
更多详情请参见“坚持你的着陆！”！位置：WebKit中的粘性土地。
我创建了一个jsfiddle来演示这是如何使用转换的。
HTML
<div class="left">
Content
</div>
<div class="right">
<div class="fixedContainer">
X
</div>
Side bar
</div>
CSS
body {
margin: 0;
}
.left {
width: 77%;
background: teal;
height: 2000px;
}
.right {
width: 23%;
background: yellow;
height: 100vh;
position: fixed;
right: 0;
top: 0;
}
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
//right: 0;
top: 0%;
transform: translateX(-100px);
}
jQuery
$('.fixedContainer').on('click', function() {
$('.right').animate({'width': '0px'});
$('.left').animate({'width': '100%'});
});
https://jsfiddle.net/bx6ktwnn/1/
