固定位置，但相对于容器

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

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

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

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

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

当前回答

如果你改变立场，你有一个解决方案：固定；定位：粘性；

所以你的代码应该是：

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

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

其他回答

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

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

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

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

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

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

请在此处查看演示。

如果容器使用某些包含规则，则可以将元素相对于其容器定位为固定位置。

<div class='parent'>
  <div class='child'></div>
</div>

.parent {
  contain: content;
}

.child {
  position: fixed;
  top: 0;
  left: 0;
}

你可以试试我的jQuery插件FixTo。

用法：

$('#mydiv').fixTo('#centeredContainer');

推荐文章