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

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

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

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

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


当前回答

我也有同样的问题,我们的一个团队成员给了我一个解决方案。为了允许div定位并相对于其他div,我们的解决方案是使用父容器包装固定div和滚动div。

.容器{位置:相对;挠曲:1;显示:柔性;}.修复{位置:绝对;}<div class=“container”><div class=“scroll”></div><div class=“fix”></div></div>

其他回答

事实上,这是可能的,而公认的答案只涉及集中,这很简单。此外,您真的不需要使用JavaScript。

这将允许您处理任何情况:

如果您想在position:relative容器中定位:absolute,请按照您的意愿设置所有内容,然后在div中创建一个新的固定位置div,其位置为:absolate,但不要设置其顶部和左侧的财产。然后,它将被固定在相对于容器的任何位置。

例如:

/*主要场地主体*/.包装器{宽度:940px;边距:0自动;位置:相对;/*确保绝对定位的子元素相对于此*/}/*要固定位置的元素的绝对定位包装*/.固定包装{宽度:220px;位置:绝对;顶部:0;左:-240px;/*将其移到网站正文的左侧,留下20px的空白*/}/*要固定其位置的元素*/.固定{宽度:220px;位置:固定;/*不要设置顶部/左侧*/}<div class=“wrapper”><div class=“fixed wrapper”><div class=“fixed”>这里的内容将是固定位置,但在网站主体左侧240像素。</div></div></div>

可悲的是,我希望这个线程可以解决我的问题,Android的WebKit将框阴影模糊像素渲染为固定位置元素的边距,但这似乎是一个bug。

只需将顶部和左侧样式从固定位置div

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

#content div将位于父div所在的位置,但将固定在那里。

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

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

请在此处查看演示。

/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>



/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}

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

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

我无意中注意到在申请时

-webkit-transform: translateZ(0);

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

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

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

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

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

但是

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

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

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

TEST