我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
我创建了一个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/
其他回答
免责声明：
这正好回答了标题：固定位置，但相对于容器。对于实际的用例，用户需要定位：粘性是一种方法。
https://developer.mozilla.org/en-US/docs/Web/CSS/position
它相对于视口建立的初始包含块进行定位，除非其祖先之一的变换、透视或过滤器属性设置为非空
您只需要向容器添加一个变换，固定元素的位置将相对于容器。我认为一个变换：translateX（0）；应该足够了。
如果你改变立场，你有一个解决方案：固定；定位：粘性；
所以你的代码应该是：
position: sticky;
top: 0;
right: 0;
现在其他潜水艇不会滑到下面。
我很晚才回答这个问题，但我相信这也是一个未来普遍存在的问题，肯定会对未来的搜索者有所帮助。
这可以通过使用技巧来解决。我们可以在这里使用calc。在计算范围内，我们可以使用100个垂直宽度，减去宽度的90%，然后除以2。请根据您的需要更改90%。在您的情况下，它可以是100%或70%，这取决于您的具体要求。
.your-class {
position: fixed;
right: calc((100vw - 90%)/2);
}
这对我有用。请注意，在我的例子中，我希望浮动元素向右移动。如果你想在左边，请用左边而不是右边。
根据我的经验，处理此问题的最佳方法是将元素踢出父元素。
position:sticky不适合我，因为它没有固定在滚动上，position:absolute不令人满意，因为它将它从文档流中删除。
我所做的只是将元素放在与父元素相同的级别（以便它们是兄弟）。这样，它固定在元素上方，不会从流中取出。不需要额外的复杂css或js。
我创建了这个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();
});
