Z-index

[ToHe86]

Hi,

I am using Bootstrap 4 and after adding data-aos tag to my dropdown and cards the z-index isn't rendered properly. Same issue as reported here (but already closed without solutions working for me): https://github.com/michalsnik/aos/issues/104

Are there any known hacks how to set z-index?

Best regards Tobi

[ausdamo]

Tobi I'm seeing the same thing. I've switched to aos@next and it didn't help either.

The animated elements are still appearing over the fixed div at the top of the page.

[ausdamo]

Correction: Issue is resolved for me using aos@next. I’m using jquery sticky as well and it was changing the z-index to inherit on the fixed element.

So glad to having working as expected now.

[Jule-]

For me aos@next fixes the overlapping issue but breaks the animation by glitching straight to the end. And if I navigate to another page of my SPA and then come back to the animated page the overlapping issue is still there and the animation goes well.

[Mostafa-Shalaby]

Ok so, I have been searching for a fix for a problem similar to this, I am using a plugin called Bootstrap-Select. I had an issue with its dropdowns always opening behind any content that was animated(in the picture below).

After few digging around, using the following CSS works as a decent bandaid solution for me.

For modern browsers (Except I.E)

.aos-fix[data-aos][data-aos].aos-animate {
    transform: unset;
}

For support of older browsers (Except I.E)

.aos-fix[data-aos][data-aos].aos-animate {
    transform: initial;
}

Both seemed to have the same effect for me on broken elements. applied the class to them.

This is the before (dropdown menu opened behind other content):

This is the after:

[saulchelewani]

@Mostafa-Shalaby this worked for me using Tailwindcss v1.7

[ToHe86]

Although it has been quite a while, I experienced the same problem again. @Mostafa-Shalaby thank you very much! Your solution fixed my problem :)

[scibuff]

Ok so, I have been searching for a fix for a problem similar to this, I am using a plugin called Bootstrap-Select. I had an issue with its dropdowns always opening behind any content that was animated(in the picture below).

After few digging around, using the following CSS works as a decent bandaid solution for me.

For modern browsers (Except I.E)

.aos-fix[data-aos][data-aos].aos-animate {
    transform: unset;
}

For support of older browsers (Except I.E)

.aos-fix[data-aos][data-aos].aos-animate {
    transform: initial;
}

This fixes the issue for me only after the transform (animation) is finished. However, (for rather obvious reasons) the incorrect z-index is visible during the animation