-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Z - index (content overlapping) problem #104
Comments
I'm not sure if I understood correctly, but what you might find helpful is adding this to your stylesheets:
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 :) |
Thanks. I will try and let you know. |
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 :) |
Good to know that it works for you @elinanen. It might be a good idea indeed. I'll add this. |
Hi, 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?
|
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 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 ? |
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 |
You need to create a new stacking context for transformed elements. Add I had a similar problem, but with custom animations. I used The initial value is Google for "z-index new stacking context" and pay special attention to cases that involve transformations. |
I have the same issue with the BSv4 dropdown. Have anyone solved this problem? |
Have your tried the solution with pointer events @martinjinda or updating transform to preserve 3d? |
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; } 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, |
Can you guys please try |
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 |
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.
|
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. |
Adding this code
stops me from using any input elements (makes them not clickable, using inspect I saw that html covered them) |
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. |
thankyou so much it's working |
worked for me |
It worked for me as well |
.aos-init[data-aos][data-aos].aos-animate { great suggestion, solved my problem |
This worked for me too |
also worked for me .. thankkkk you |
1 similar comment
also worked for me .. thankkkk you |
Also, you can tinker with the z-index of the AOS element:
This worked in my case |
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.
The text was updated successfully, but these errors were encountered: