Lottie 动画结束 header

Question

中的情况

只需滚动一下，您就会发现一切正常，除了 SVG 动画 (Lottie) 正在 header 上。在两个页面中（“/”和“/cursos”）。

有人知道如何修复它吗？

我试过将 header 位置更改为 'fixed' 和 'sticky'，但似乎没有任何效果。我也尝试更改包含动画的 div 的属性。

感谢您的宝贵时间。

非常感谢。

Answer 1

添加z-index:10到header容器：元素class:

sticky top-0 bg-white shadow

添加z-index:1到动画容器：元素class:

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

Answer 2

你只需要为你的header或.stickyclass设置一个z-index，像这样：

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

Lottie animation going over header