我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
如果您使用JavaScript，这是可能的。在本例中，jQuery插件Sticky Kit：
其他回答
根据我的经验，处理此问题的最佳方法是将元素踢出父元素。
position:sticky不适合我，因为它没有固定在滚动上，position:absolute不令人满意，因为它将它从文档流中删除。
我所做的只是将元素放在与父元素相同的级别（以便它们是兄弟）。这样，它固定在元素上方，不会从流中取出。不需要额外的复杂css或js。
当您使用position:fixed CSS规则并尝试应用top/left/right/bottom时，它会相对于窗口定位元素。
解决方法是使用边距财产，而不是上/左/右/下
我也有同样的问题，我们的一个团队成员给了我一个解决方案。为了允许div定位并相对于其他div，我们的解决方案是使用父容器包装固定div和滚动div。
.容器{位置：相对；挠曲：1；显示：柔性；}.修复{位置：绝对；}<div class=“container”><div class=“scroll”></div><div class=“fix”></div></div>
我创建了这个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();
});
我很晚才回答这个问题，但我相信这也是一个未来普遍存在的问题，肯定会对未来的搜索者有所帮助。
这可以通过使用技巧来解决。我们可以在这里使用calc。在计算范围内，我们可以使用100个垂直宽度，减去宽度的90%，然后除以2。请根据您的需要更改90%。在您的情况下，它可以是100%或70%，这取决于您的具体要求。
.your-class {
position: fixed;
right: calc((100vw - 90%)/2);
}
这对我有用。请注意，在我的例子中，我希望浮动元素向右移动。如果你想在左边，请用左边而不是右边。
