Lottie animation going over header

user_12071824 0
Viewed 830

You can check what is going on in www.dynamicpoa.com

Just scroll and you'll see that everything is working properly, except the SVG animation (Lottie) that is going over the header. In both pages ("/" and "/cursos").

Anyone have a hint on how to fix it?

I've tried changing header position to 'fixed' and 'sticky' but nothing seems to work. I've tried to change the properties of the div that holds the animation aswell.

Appreciate your time.

Thank you very much.

lottie tailwind-css gatsby reactjs
2 Answers

You only need to set a z-index for your header or .sticky class, like this: 

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

Add z-index:10 to header container: element class:

sticky top-0 bg-white shadow

Add z-index:1 to animation container: element class: 

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