我正在尝试修复一个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/
其他回答
是的，只要不设置固定元素的位置（顶部或左侧等），这是可能的（不过，您仍然可以使用边距设置相对位置）。西蒙·博斯（Simon Bos）不久前发布了这篇文章。
然而，不要期望固定元素与非固定亲属滚动。
请在此处查看演示。
我也有同样的问题，我们的一个团队成员给了我一个解决方案。为了允许div定位并相对于其他div，我们的解决方案是使用父容器包装固定div和滚动div。
.容器{位置：相对；挠曲：1；显示：柔性；}.修复{位置：绝对；}<div class=“container”><div class=“scroll”></div><div class=“fix”></div></div>
如果你改变立场，你有一个解决方案：固定；定位：粘性；
所以你的代码应该是：
position: sticky;
top: 0;
right: 0;
现在其他潜水艇不会滑到下面。
神奇的是将屏幕宽度减去容器宽度，然后除以2：
//1400px is according to container max-width (left can be also right)
.fixed {
position: fixed;
right: calc((100vw - 1400px)/2);
}
注意：css calc（）函数几乎不受支持，但不是100%受支持。对于大多数用例，它肯定得到了足够的支持。单击此处了解更多详细信息
代码段（有一个300px的容器，正好适合这个网站的小部件）：
.容器{最大宽度：300px；左边距：自动；右边距：自动；}.固定{位置：固定；右：计算（（100vw-300px）/2）；}@媒体屏幕和（最大宽度：300px）{右：0px；}<div style=“height:3000px”><div class=“container”><button class=“fixed”>固定含量</按钮>Lorem ipsum dolor坐在amet consectetur adipiscing elit。Laborum，eum？我要求最低限度，最低限度，最高限度，最低程度，最低限度-最低限度-最高限度！是否有责任追究责任？在过去的几年里，人们都在用鼻子和鼻子说话，用鼻子说话！在法庭的最高级别减去实验室的修改和体积后，法庭上的数字是相等的。加快我们的劳动时间，让我们一起努力，共同努力，共同奋斗，共同进步，共同进步！无论是什么样的物质解决方案，几乎没有人会在别名为auten pariator animi error的地方进行实验，也没有人会对实验结果进行验证！在dolorem ipsam eos porro magni出汗可能是主要的，它的脸。我们的过失是错误的，因为它排斥了可能的质量，asperiores earum ipsum interstias dicta sint fugit at que veniam dolorum illo？官方必须对所有人进行调查，调查结果表明，最大限度地减少自然灾害。所有人都坐着。</div></div>
如果您使用JavaScript，这是可能的。在本例中，jQuery插件Sticky Kit：
