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

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

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

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

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


当前回答

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

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

其他回答

是的,根据规格,有办法。

虽然我同意格雷姆·布莱克伍德的答案应该是公认的,因为它实际上解决了这个问题,但应该注意的是,固定元素可以相对于其容器定位。

我无意中注意到在申请时

-webkit-transform: translateZ(0);

相对于身体,它创建了一个固定的子对象(而不是视口)。所以我左边的固定元素和顶部的财产现在是相对于容器的。

所以我做了一些研究,发现这个问题已经被埃里克·迈耶(Eric Meyer)所涵盖,即使这感觉像是一个“把戏”,但事实证明这是规范的一部分:

对于布局由CSS框模型控制的元素,任何值如果转换结果为“无”,则会同时创建堆叠上下文和包含块。该对象充当包含用于固定定位子体的块。

http://www.w3.org/TR/css3-transforms/

因此,如果对父元素应用任何变换,它将成为包含块。

但是

问题是,实现似乎有问题/有创意,因为元素也停止了固定的行为(即使这一点似乎不是规范的一部分)。

同样的行为在Safari、Chrome和Firefox中都可以找到,但在IE11中没有(其中固定元素仍然保持固定)。

另一件有趣的(未记录的)事情是,当一个固定元素包含在一个转换的元素中时,虽然它的顶部和左侧财产现在将与容器相关,但考虑到方框大小属性,它的滚动上下文将扩展到元素的边界,就像方框大小设置为border-box一样。对于一些有创意的人来说,这可能会成为一件玩物:)

TEST

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

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

这很简单(根据下面的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()函数,但这将不必要地延长这篇文章的篇幅。我选择了尽量缩短。

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

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

其行为说明如下:

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

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

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

用法:

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