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

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

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

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

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


当前回答

如果你改变立场,你有一个解决方案:固定;定位:粘性;

所以你的代码应该是:

position: sticky;
top: 0;
right: 0;

现在其他潜水艇不会滑到下面。

其他回答

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

免责声明:

这正好回答了标题:固定位置,但相对于容器。对于实际的用例,用户需要定位:粘性是一种方法。


https://developer.mozilla.org/en-US/docs/Web/CSS/position

它相对于视口建立的初始包含块进行定位,除非其祖先之一的变换、透视或过滤器属性设置为非空

您只需要向容器添加一个变换,固定元素的位置将相对于容器。我认为一个变换:translateX(0);应该足够了。

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

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

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

实现相对固定位置的另一个奇怪的解决方案是将容器转换为iframe,这样固定元素可以固定到容器的视口而不是整个页面。