Lottie 动画越过标题

Posted 2023-03-06

【中文标题】Lottie 动画越过标题

【英文标题】：Lottie animation going over header

【发布时间】：2020-07-04 01:26:22

【问题描述】：

你可以在www.dynamicpoa.com查看发生了什么

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

任何人有关于如何修复它的提示？

我尝试将标题位置更改为“固定”和“粘性”，但似乎没有任何效果。我已经尝试更改包含动画的 div 的属性。

珍惜你的时间。

非常感谢。

【参考方案1】：

您只需为您的header 或.sticky 类设置一个z-index，如下所示：

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

【参考方案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