我正在尝试修复一个div,使其始终保持在屏幕顶部,使用:

position: fixed;
top: 0px;
right: 0px;

然而,div位于居中的容器内。当我使用position:fixed时,它会相对于浏览器窗口修复div,例如它位于浏览器的右侧。相反,它应该相对于容器固定。

我知道position:absolute可以用来固定相对于div的元素,但是当您向下滚动页面时,元素会消失,并且不会像position:fixed那样固定在顶部。

有没有破解或解决方法来实现这一点?


当前回答

我不得不用我的客户想坐在内容区之外的广告来做这件事。我只是简单地做了下面的事情,它就像一个魅力!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

其他回答

如果您使用JavaScript,这是可能的。在本例中,jQuery插件Sticky Kit:

我不得不用我的客户想坐在内容区之外的广告来做这件事。我只是简单地做了下面的事情,它就像一个魅力!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

你可以试试我的jQuery插件FixTo。

用法:

$('#mydiv').fixTo('#centeredContainer');

2019解决方案:您可以使用位置:粘性属性。

下面是一个示例CODEPEN,演示了用法以及它与位置的区别:fixed。

其行为说明如下:

具有粘性位置的元素基于用户的滚动位置来定位。它的作用基本上类似于position:relative,直到元素滚动超过特定偏移量,在这种情况下,它变成position:fixed。当它向后滚动时,它将返回到其先前(相对)位置。它影响页面中其他元素的流动,即占据页面上的特定空间(就像位置:相对)。如果它是在某个容器内定义的,则相对于该容器定位。如果容器有一些溢出(滚动),根据滚动偏移量,它将变为位置:固定。

因此,如果您想在容器内实现固定功能,请使用粘性。

简短回答:没有。(现在可以使用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在这个回答中向我指出了这一点