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

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

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

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

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


当前回答

我的项目是.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>

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

其他回答

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

<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>

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

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

请在此处查看演示。

检查此项:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>

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

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

在这种情况下,可以根据父元素更改固定元素的位置。

可以使用以下代码获取父元素的位置。

function coordinatesSetter() {
    var elm = $('parentElement');
    var rect = elm.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    return {top: rect.top + scrollTop, left: rect.left + scrollLeft});
 }