我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
如果你改变立场，你有一个解决方案：固定；定位：粘性；
所以你的代码应该是：
position: sticky;
top: 0;
right: 0;
现在其他潜水艇不会滑到下面。
其他回答
如果你改变立场，你有一个解决方案：固定；定位：粘性；
所以你的代码应该是：
position: sticky;
top: 0;
right: 0;
现在其他潜水艇不会滑到下面。
我创建了这个jQuery插件来解决我遇到的类似问题，我有一个居中的容器（表格数据），我希望在滚动列表时将标题固定在页面顶部，但我希望它锚定在表格数据上，这样它就可以放在我放置容器的任何位置（居中、左、右），并允许它在水平滚动时随页面左右移动。
下面是这个jQuery插件的链接，它可以解决这个问题：
https://github.com/bigspotteddog/ScrollToFixed
该插件的描述如下：
该插件用于将元素固定到页面顶部，如果元素垂直滚动到视图之外；然而，它确实允许元素随着水平滚动继续向左或向右移动。
给定选项marginTop，一旦垂直滚动到达目标位置，元素将停止垂直向上移动；但是，当页面向左或向右滚动时，元素仍将水平移动。一旦页面向下滚动到目标位置，元素将恢复到页面上的原始位置。
该插件已在Firefox 3/4、Google Chrome 10/11、Safari 5和Internet Explorer 8/9中进行了测试。
特定案例的用法：
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>
$(document).ready(function() {
$('#mydiv').scrollToFixed();
});
根据我的经验，处理此问题的最佳方法是将元素踢出父元素。
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/
