时间戳

首页 > 解决方案 > 如何将固定元素放入转换后的容器中？

html - 如何将固定元素放入转换后的容器中？

问题描述

我编写的应用程序由许多路线组成，路线之间有过渡动画。看起来像：

<section class="a animated bounceUp">...</section>
<section class="b">...</section>

当我更改路线时，它会显示动画并呈现新内容 - 非常简单的行为。

今天我创建了一个新部分，我需要将固定过滤器放入固定到视口的过滤器中。它应该看起来像：

<section class="a">...</section>
<section class="b">...</section>
<section class="c animated bounceDown">
 <div class="fixed-filters">...</div>
 <div>...</div>
</section>

在这里我遇到了我的问题。我在 div 中添加了固定位置，但它不起作用。元素没有固定位置。

当然，我对此进行了研究，发现了以下文章： 'transform3d' not working with position: fixed children 和 https ://www.achrafkassioui.c​​om/blog/position-fixed-and-CSS-transforms/

这说明我不能这样做，因为：

'transform' 创建一个新的局部坐标系：

在 HTML 命名空间中，除了 none 之外的任何转换值都会导致创建堆栈上下文和包含块。该对象充当固定定位后代的包含块。

结束了吗？或者也许有任何解决方案如何做到这一点？我将感谢您在解决此问题或找到任何人都可以使用的好解决方法方面的帮助。

标签： htmlcsscss-positioncss-transforms

解决方案

推荐阅读