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

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

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

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

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


当前回答

免责声明:

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


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

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

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

其他回答

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

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

检查此项:

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

当您使用position:fixed CSS规则并尝试应用top/left/right/bottom时,它会相对于窗口定位元素。

解决方法是使用边距财产,而不是上/左/右/下

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

只需将顶部和左侧样式从固定位置div

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

#content div将位于父div所在的位置,但将固定在那里。