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

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

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

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

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


当前回答

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

所以你的代码应该是:

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

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

其他回答

两个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中的最终容器可以有多个固定元素,并且仍然具有与左上角相关的所有元素。但是,只有当它们都放在容器中的第一个位置时,这才是正确的,因为这一比较结果表明,如果分散在容器内容中,定位就会变得不可靠。

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

我创建了这个jQuery插件来解决我遇到的类似问题,我有一个居中的容器(表格数据),我希望在滚动列表时将标题固定在页面顶部,但我希望它锚定在表格数据上,这样它就可以放在我放置容器的任何位置(居中、左、右),并允许它在水平滚动时随页面左右移动。

下面是这个jQuery插件的链接,它可以解决这个问题:

https://github.com/bigspotteddog/ScrollToFixed

该插件的描述如下:

该插件用于将元素固定到页面顶部,如果元素垂直滚动到视图之外;然而,它确实允许元素随着水平滚动继续向左或向右移动。

给定选项marginTop,一旦垂直滚动到达目标位置,元素将停止垂直向上移动;但是,当页面向左或向右滚动时,元素仍将水平移动。一旦页面向下滚动到目标位置,元素将恢复到页面上的原始位置。

该插件已在Firefox 3/4、Google Chrome 10/11、Safari 5和Internet Explorer 8/9中进行了测试。

特定案例的用法:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});

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

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

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});
 }

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

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

请在此处查看演示。

答案是肯定的,只要在将div位置设置为固定后不设置left:0或right:0。

http://jsfiddle.net/T2PL5/85/

签出侧边栏div.它是固定的,但与父级相关,而不是窗口视图点。

正文{背景:#ccc;}.包装器{边距:0自动;高度:1400px;宽度:650px;背景:绿色;}.侧边栏{背景色:#ddd;浮动:左侧;宽度:300px;高度:100px;位置:固定;}.主要{浮动:右侧;背景色:黄色;宽度:300px;高度:1400px;}<div class=“wrapper”>包装器<div class=“sidebar”>侧边栏</div><div class=“main”>main</div></div>