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

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

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

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

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


当前回答

神奇的是将屏幕宽度减去容器宽度,然后除以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>

其他回答

事实上,这是可能的,而公认的答案只涉及集中,这很简单。此外,您真的不需要使用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。

神奇的是将屏幕宽度减去容器宽度,然后除以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>

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

我很晚才回答这个问题,但我相信这也是一个未来普遍存在的问题,肯定会对未来的搜索者有所帮助。

这可以通过使用技巧来解决。我们可以在这里使用calc。在计算范围内,我们可以使用100个垂直宽度,减去宽度的90%,然后除以2。请根据您的需要更改90%。在您的情况下,它可以是100%或70%,这取决于您的具体要求。

.your-class {
  position: fixed;
  right: calc((100vw - 90%)/2);
}

这对我有用。请注意,在我的例子中,我希望浮动元素向右移动。如果你想在左边,请用左边而不是右边。

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

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

其行为说明如下:

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

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