我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
当您使用position:fixed CSS规则并尝试应用top/left/right/bottom时，它会相对于窗口定位元素。
解决方法是使用边距财产，而不是上/左/右/下
其他回答
实现相对固定位置的另一个奇怪的解决方案是将容器转换为iframe，这样固定元素可以固定到容器的视口而不是整个页面。
如果你改变立场，你有一个解决方案：固定；定位：粘性；
所以你的代码应该是：
position: sticky;
top: 0;
right: 0;
现在其他潜水艇不会滑到下面。
是的，根据规格，有办法。
虽然我同意格雷姆·布莱克伍德的答案应该是公认的，因为它实际上解决了这个问题，但应该注意的是，固定元素可以相对于其容器定位。
我无意中注意到在申请时
-webkit-transform: translateZ(0);
相对于身体，它创建了一个固定的子对象（而不是视口）。所以我左边的固定元素和顶部的财产现在是相对于容器的。
所以我做了一些研究，发现这个问题已经被埃里克·迈耶（Eric Meyer）所涵盖，即使这感觉像是一个“把戏”，但事实证明这是规范的一部分：
对于布局由CSS框模型控制的元素，任何值如果转换结果为“无”，则会同时创建堆叠上下文和包含块。该对象充当包含用于固定定位子体的块。
http://www.w3.org/TR/css3-transforms/
因此，如果对父元素应用任何变换，它将成为包含块。
但是
问题是，实现似乎有问题/有创意，因为元素也停止了固定的行为（即使这一点似乎不是规范的一部分）。
同样的行为在Safari、Chrome和Firefox中都可以找到，但在IE11中没有（其中固定元素仍然保持固定）。
另一件有趣的（未记录的）事情是，当一个固定元素包含在一个转换的元素中时，虽然它的顶部和左侧财产现在将与容器相关，但考虑到方框大小属性，它的滚动上下文将扩展到元素的边界，就像方框大小设置为border-box一样。对于一些有创意的人来说，这可能会成为一件玩物：）
TEST
使用纯CSS，你无法做到这一点；至少我没有。然而，您可以非常简单地使用jQuery来实现。我会解释我的问题，稍加改动你就可以使用了。
因此，首先，我希望我的元素有一个固定的顶部（从窗口顶部），以及一个从父元素继承的左侧组件（因为父元素居中）。要设置左侧组件，只需将元素放到父元素中，并设置父元素的位置：relative。
然后，您需要知道当滚动条位于顶部（y为零滚动）时，元素距离顶部的距离是多少；还有两种选择。首先，它是静态的（一些数字），或者必须从父元素中读取它。
在我的例子中，它距离顶部静态图像150像素。所以，当你看到150时，它是当我们没有滚动时，元素从顶部开始的数量。
CSS
#parent-element{position:relative;}
#promo{position:absolute;}
jQuery
$(document).ready(function() { //This check window scroll bar location on start
wtop=parseInt($(window).scrollTop());
$("#promo").css('top',150+wtop+'px');
});
$(window).scroll(function () { //This is when the window is scrolling
wtop=parseInt($(window).scrollTop());
$("#promo").css('top',150+wtop+'px');
});
如果您使用JavaScript，这是可能的。在本例中，jQuery插件Sticky Kit：
