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

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

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

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

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


当前回答

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

其他回答

这很简单(根据下面的HTML)

技巧是不要在元素(div)上使用“position:fixed;”的top或left。如果未指定这些元素,则“fixed content”元素将显示为相对于封闭元素(具有“position:RELATIVE;”的div)INSTEAD OF相对于浏览器窗口!!!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

上面的内容允许我在垂直滚动的div中的许多文本的顶部找到一个关闭的“X”按钮。“X”位于适当位置(不会随滚动文本移动,但当用户调整浏览器窗口的宽度时,它会随包围div容器向左或向右移动!因此,它垂直“固定”,但相对于包围元素水平定位!

在我开始工作之前,当我向下滚动文本内容时,“X”向上滚动并消失。

很抱歉没有提供我的javascript hideDiv()函数,但这将不必要地延长这篇文章的篇幅。我选择了尽量缩短。

当您使用position:fixed CSS规则并尝试应用top/left/right/bottom时,它会相对于窗口定位元素。

解决方法是使用边距财产,而不是上/左/右/下

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

在这种情况下,可以根据父元素更改固定元素的位置。

可以使用以下代码获取父元素的位置。

function coordinatesSetter() {
    var elm = $('parentElement');
    var rect = elm.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    return {top: rect.top + scrollTop, left: rect.left + scrollLeft});
 }

是的,只要不设置固定元素的位置(顶部或左侧等),这是可能的(不过,您仍然可以使用边距设置相对位置)。西蒙·博斯(Simon Bos)不久前发布了这篇文章。

然而,不要期望固定元素与非固定亲属滚动。

请在此处查看演示。