我正在尝试修复一个div，使其始终保持在屏幕顶部，使用：
position: fixed;
top: 0px;
right: 0px;
然而，div位于居中的容器内。当我使用position:fixed时，它会相对于浏览器窗口修复div，例如它位于浏览器的右侧。相反，它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素，但是当您向下滚动页面时，元素会消失，并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点？
当前回答
2019解决方案：您可以使用位置：粘性属性。
下面是一个示例CODEPEN，演示了用法以及它与位置的区别：fixed。
其行为说明如下：
具有粘性位置的元素基于用户的滚动位置来定位。它的作用基本上类似于position:relative，直到元素滚动超过特定偏移量，在这种情况下，它变成position:fixed。当它向后滚动时，它将返回到其先前（相对）位置。它影响页面中其他元素的流动，即占据页面上的特定空间（就像位置：相对）。如果它是在某个容器内定义的，则相对于该容器定位。如果容器有一些溢出（滚动），根据滚动偏移量，它将变为位置：固定。
因此，如果您想在容器内实现固定功能，请使用粘性。
其他回答
我也有同样的问题，我们的一个团队成员给了我一个解决方案。为了允许div定位并相对于其他div，我们的解决方案是使用父容器包装固定div和滚动div。
.容器{位置：相对；挠曲：1；显示：柔性；}.修复{位置：绝对；}<div class=“container”><div class=“scroll”></div><div class=“fix”></div></div>
如果您使用JavaScript，这是可能的。在本例中，jQuery插件Sticky Kit：
使用纯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');
});
答案是肯定的，只要在将div位置设置为固定后不设置left:0或right:0。
http://jsfiddle.net/T2PL5/85/
签出侧边栏div.它是固定的，但与父级相关，而不是窗口视图点。
正文{背景：#ccc；}.包装器{边距：0自动；高度：1400px；宽度：650px；背景：绿色；}.侧边栏{背景色：#ddd；浮动：左侧；宽度：300px；高度：100px；位置：固定；}.主要{浮动：右侧；背景色：黄色；宽度：300px；高度：1400px；}<div class=“wrapper”>包装器<div class=“sidebar”>侧边栏</div><div class=“main”>main</div></div>
简短回答：没有。（现在可以使用CSS转换。请参阅下面的编辑）
长篇大论：使用“固定”定位的问题在于，它会使元素脱离流程。因此，它不能相对于父对象重新定位，因为它好像没有父对象。但是，如果容器具有固定的已知宽度，则可以使用以下内容：
#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}
http://jsfiddle.net/HFjU6/1/
编辑（2015年3月）：
这是过时的信息。借助CSS3变换的魔力，现在可以将动态大小（水平和垂直）的内容居中。同样的原则也适用，但您可以使用translateX（-50%）来代替使用边距来偏移容器。这不适用于上面的边距技巧，因为除非宽度是固定的，否则不知道要偏移多少，并且不能使用相对值（例如50%），因为它将相对于父元素，而不是它所应用的元素。transform的行为不同。它的值与它们所应用的元素有关。因此，50%的转换表示元素的宽度的一半，而50%的边距表示父元素的宽度。这是一个IE9+解决方案
使用与上述示例类似的代码，我使用完全动态的宽度和高度重新创建了相同的场景：
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
如果您希望它居中，也可以这样做：
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
演示：
jsFiddle：仅水平居中jsFiddle：水平和垂直居中最初的功劳是用户aaronk6在这个回答中向我指出了这一点
