Why does my fixed header is not above all elements?

I've got a problem on my client's website, here is the link: https://www.wisetrailrunning.com/products/nanoshell-160g-pour-homme

I don't think it's a Shopify problem, I think its css.

When you scroll down, the fixed header is above certains elements, and behind certains elements.

I've tried to set a z-index to the element and his parents. I've tried to set opacity 1 to the element and his parents. I've tried to set background color to white to the element and his parents. I've tried to set the positions to the element and his parents.

Nothing worked.

I've searched for many topics on the website but didn't find a working answer after few hours.

Thanks a lot for your help !

Solution

I've checked your css and should work only adding this

.transition-body {
z-index: 1;
position: relative;
}

That happens because z-index work in a way you have to put it on main parents. That's why I added it on .transition-body and not in header. Because .transition-body is the parent of header and it's in the same html level than .shopify-section