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

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

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

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

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


当前回答

答案是肯定的,只要在将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>

其他回答

是的,只要不设置固定元素的位置(顶部或左侧等),这是可能的(不过,您仍然可以使用边距设置相对位置)。西蒙·博斯(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%);
}

神奇的是将屏幕宽度减去容器宽度,然后除以2:

//1400px is according to container max-width (left can be also right)
.fixed {
  position: fixed;
  right: calc((100vw - 1400px)/2);
}

注意:css calc()函数几乎不受支持,但不是100%受支持。对于大多数用例,它肯定得到了足够的支持。单击此处了解更多详细信息

代码段(有一个300px的容器,正好适合这个网站的小部件):

.容器{最大宽度:300px;左边距:自动;右边距:自动;}.固定{位置:固定;右:计算((100vw-300px)/2);}@媒体屏幕和(最大宽度:300px){右:0px;}<div style=“height:3000px”><div class=“container”><button class=“fixed”>固定含量</按钮>Lorem ipsum dolor坐在amet consectetur adipiscing elit。Laborum,eum?我要求最低限度,最低限度,最高限度,最低程度,最低限度-最低限度-最高限度!是否有责任追究责任?在过去的几年里,人们都在用鼻子和鼻子说话,用鼻子说话!在法庭的最高级别减去实验室的修改和体积后,法庭上的数字是相等的。加快我们的劳动时间,让我们一起努力,共同努力,共同奋斗,共同进步,共同进步!无论是什么样的物质解决方案,几乎没有人会在别名为auten pariator animi error的地方进行实验,也没有人会对实验结果进行验证!在dolorem ipsam eos porro magni出汗可能是主要的,它的脸。我们的过失是错误的,因为它排斥了可能的质量,asperiores earum ipsum interstias dicta sint fugit at que veniam dolorum illo?官方必须对所有人进行调查,调查结果表明,最大限度地减少自然灾害。所有人都坐着。</div></div>

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

用法:

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

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

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