如何在转换元素中保留元素的固定位置？

Question

如果容器被翻译,那么固定位置的元素会松开它们的位置,这是一个众所周知的"错误".例如,如果我有这样的结构:

<div class="container">
   <div class="fixed"></div>
</div>

并且,比如,当变换器被变换时(例如,translate(x,y),rotate()等等),容器被滚动,然后固定元素的行为就像它相对定位一样,并且随着容器滚动.例如,我可以在最新的Firefox上看到它.

如何解决这类问题呢？有什么办法吗？

Answer 1

我不熟悉这个错误，但是当您使用该元素时，positioned: fixed;该元素是相对于浏览器窗口定位的，因此将其放入容器中实际上没有任何意义。我的建议是这个标记：

<div class="fixed"></div>
<div class="container"></div>