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

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

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

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

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


当前回答

两个HTML元素和纯CSS(现代浏览器)

请参见这个jsFiddle示例。调整大小并查看固定元素如何随浮动元素一起移动。使用最内侧的滚动条查看滚动在站点上的工作方式(固定元素保持固定)。

正如这里许多人所说的,一个键没有在固定元素上设置任何位置设置(没有上、右、下或左值)。

相反,我们将所有固定元素(注意最后一个框中有四个元素)放在要放置的框中,如下所示:

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

然后我们使用margin-top和margin-left相对于容器“移动”它们,就像这个CSS所做的那样:

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

注意,因为固定元素忽略了所有其他布局元素,所以fiddle中的最终容器可以有多个固定元素,并且仍然具有与左上角相关的所有元素。但是,只有当它们都放在容器中的第一个位置时,这才是正确的,因为这一比较结果表明,如果分散在容器内容中,定位就会变得不可靠。

包装器在定位上是静态的、相对的还是绝对的,这无关紧要。

其他回答

位置:粘滞,这是一种新的定位元素的方法,在概念上类似于位置:固定。不同之处在于,在视口中满足给定的偏移阈值之前,具有position:sticky的元素在其父元素中的行为类似于position:relative。

在Chrome 56中(目前为2016年12月的测试版,2017年1月稳定):粘性现在又回来了。

https://developers.google.com/web/updates/2016/12/position-sticky

更多详情请参见“坚持你的着陆!”!位置:WebKit中的粘性土地。

我不得不用我的客户想坐在内容区之外的广告来做这件事。我只是简单地做了下面的事情,它就像一个魅力!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

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

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

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

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

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

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

请在此处查看演示。

我的项目是.NET ASP Core 2 MVC Angular 4模板和Bootstrap 4。将“粘性顶部”添加到第一行的主应用程序组件html(即app.component.html)中,效果如下:

<div class='流动粘性顶部'><div class='col-sm-12'><导航菜单顶部></nav菜单顶部></div></div><div class=“row”><div class='col-sm-3'><nav menu></nav menu></div><div class='col-sm-9正文内容'><路由器出口></路由器出口></div></div>

这是惯例还是我把它简化了?