Lottie动画超越页眉

Question

您可以查看 www.dynamicpoa.com 了解最新情况。

只需向下滚动，您会发现一切正常，除了在标头上方的 SVG 动画（Lottie）不起作用。无论是在主页 ("/") 还是在课程页面 ("/cursos") 都有此问题。

请问有人知道如何修复吗？

我已尝试将标题位置更改为 'fixed' 和 'sticky'，但似乎没有效果。我还尝试更改包含动画的 div 的属性。

感谢您的时间。

非常感谢。

- Rafael

Answer 1

您只需为您的

标签或.sticky类设置一个z-index，像这样：

.sticky{
  position: sticky;
  z-index: 10;
}

- Ferran Buireu

Answer 2

在头部容器的元素类中添加 z-index:10：

sticky top-0 bg-white shadow 

请在动画容器中添加 z-index:1：元素类：

width:500px;height:500px;overflow:hidden;margin:0 auto;z-index: 1;outline:none; z1

- D. Richard