Z - index (content overlapping) problem

[ltsharma]

i have added AOS animation for every section. some section contains dropdown (bootstrap select picker), that produces dropdown div. but the problem is, the content which animates later than the content which has dropdown is overlapping dropdown menu. I tried removing AOS, its working fine. Tried with changing z-index no luck. finally end up with removing AOS for now.

[michalsnik]

I'm not sure if I understood correctly, but what you might find helpful is adding this to your stylesheets:

// scss
[data-aos] {
  pointer-events: none;
  &.aos-animate {
    pointer-events: auto;
  }
}

I might add this to AOS repository as well, but for now please try this in your project and let me know if this works for you :)

[ltsharma]

Thanks. I will try and let you know.

[elinanen]

Hi, I had the same issue, the elements where I applied animations were hiding overlays they were supposed to open. Changing the z-index also didn't work for me. However the code above fixed the problem, so adding that to AOS repository might not be a bad idea :)

[michalsnik]

Good to know that it works for you @elinanen. It might be a good idea indeed. I'll add this.

[gl-webentwicklung]

Hi,
I think I have the same problem.
I have a menu that is sticky and z-index="1", the rest of the content z-index="0".

As soon as I add aos, the z-index does not work anymore and the content overlaps the sticky menu.

I tried to add that code to the css, but nothing changed. Can you please give more detailed explication how to use that code in the stylsheet?
I did something like this:

#stickymenu { width: 100%; position: relative; z-index: 1; [data-aos] { pointer-events: none; &.aos-animate { pointer-events: auto; } } }

[a2bsoftware]

Just chiming in to let you know that I had a similar issue. The SCSS code that you posted has fixed it, it does seem a little hacky though.

More info on my case:
I had a top toolbar page header (imagine Material-Design type header toolbar) that animated into view when the user scrolls down the page. The static header buttons underneath the placeholder, etc. did not click. Let me know if you would like more info.

[jwillp]

I am having the same problem in the case of a full screen hamburger menu. However, the above code does not fix the problem ... Did anyone find a fix for this ?

[yusupprog]

Same problem. After animation has been applied, z-index doesn't work at all. Think problem is that animation has been made using transform: translate

[fluxxus]

You need to create a new stacking context for transformed elements.

Add transform-style: preserve-3d in the mix. After that you can control them with z-index.

I had a similar problem, but with custom animations. I used transform: translate3d() in my custom animations. Basically, you need to put all transformed elements in 3d mode, only after that you can create new stacking context.

The initial value is transform-style: flat; and changing z-index with that applied won't have much effect.

Google for "z-index new stacking context" and pay special attention to cases that involve transformations.

[martinjinda]

I have the same issue with the BSv4 dropdown. Have anyone solved this problem?

[michalsnik]

Have your tried the solution with pointer events @martinjinda or updating transform to preserve 3d?

[tjl-git]

Hi there,

I wonder if anyone can help me, I have a similar issue where I need to have a higher z-index to overlap content beneath on hover. If I remove data-aos="fade-up" from my set-up it then works perfectly fine, but sadly I don't want to remove this. I have tried applying transform-style: preserve-3d to my elements, but this sadly doesn't work, but then maybe I am not doing this correctly.

This is what I have:

.people_box_text.mask { z-index: 1; }
.people_box_text.hover img { opacity: 1; z-index: 5; }

But sadly the img remains underneath the other data-aos elements in the list below.

Does anyone have any suggestions to get this working?

Thanks ever so much,
TJ

[michalsnik]

Can you guys please try aos@next and let me know if this is still the case?

[michalsnik]

I tried to reproduce z-index problem in aos@next, and I was able to achieve sticky menu with proper z-indexes without any hacks. Given that - I'm closing this issue, and if you'll experience further problems, please prepare codepen/codesandbox that reproduces the case, so I can investigate it properly

[jeremymansfield]

I've tried adding in the suggested code, but I still have a problem with dropdown panes that are opening underneath anything with data-aos. I am using Foundation 6 as my framework, and the below suggested "fix" does not do anything.

// scss
[data-aos] {
  pointer-events: none;
  &.aos-animate {
    pointer-events: auto;
  }
}

[ToHe86]

I'm using Bootstrap v4 and having the same issue with a dropdown and cards. z-index won't work and is ignored. Removing data-aos tag solves the issue and everything is rendered properly.
Suggested solutions with preserve-3d and updating scss don't work for me

[MalekGC]

Adding this code

// scss
[data-aos] {
  pointer-events: none;
  &.aos-animate {
    pointer-events: auto;
  }
}

stops me from using any input elements (makes them not clickable, using inspect I saw that html covered them)

[alexandralangton]

I just encountered the same z-index issue using aos@next with a pseudo ::after element. Changing this to a ::before element fixed the issue, but it seems like this isn't fully resolved.

[SKsaikrishna77]

Hi,
I think I have the same problem.
I have a menu that is sticky and z-index="1", the rest of the content z-index="0".

As soon as I add aos, the z-index does not work anymore and the content overlaps the sticky menu.

I tried to add that code to the css, but nothing changed. Can you please give more detailed explication how to use that code in the stylsheet?
I did something like this:

#stickymenu { width: 100%; position: relative; z-index: 1; [data-aos] { pointer-events: none; &.aos-animate { pointer-events: auto; } } }

thankyou so much it's working

[harpreetsingh04]

i have added AOS animation for every section. some section contains dropdown (bootstrap select picker), that produces dropdown div. but the problem is, the content which animates later than the content which has dropdown is overlapping dropdown menu. I tried removing AOS, its working fine. Tried with changing z-index no luck. finally end up with removing AOS for now.

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

worked for me

[taher2612]

i have added AOS animation for every section. some section contains dropdown (bootstrap select picker), that produces dropdown div. but the problem is, the content which animates later than the content which has dropdown is overlapping dropdown menu. I tried removing AOS, its working fine. Tried with changing z-index no luck. finally end up with removing AOS for now.

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

worked for me

It worked for me as well

[IIV21]

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

great suggestion, solved my problem

[AmeerBamigbayan]

i have added AOS animation for every section. some section contains dropdown (bootstrap select picker), that produces dropdown div. but the problem is, the content which animates later than the content which has dropdown is overlapping dropdown menu. I tried removing AOS, its working fine. Tried with changing z-index no luck. finally end up with removing AOS for now.

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

worked for me

This worked for me too
Thank you!

[saniamalik119]

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

great suggestion, solved my problem

also worked for me .. thankkkk you

[saniamalik119]

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

great suggestion, solved my problem

also worked for me .. thankkkk you

[dain1982]

Also, you can tinker with the z-index of the AOS element:

[data-aos] {
  z-index: 1;
}

This worked in my case