Z-Index issue
I tried solving the "Meet Landing Page" exercise. Everything is almost done. But there is one issue. The "Download" button at the bottom of the page is not accessible. I thinks that is becuase of the z-index.
Github repo: https://rounakkumarsingh.github.io/meet-landing-page/src/
Live Link: https://rounakkumarsingh.github.io/meet-landing-page/src/
Please Help. I used HTML and CSS only. I used Tailwind as framework.
11 Replies
Your footer has a negative z-index which is pushing it back and preventing the button from getting the hover.
I suggest removing the negative index from the footer,
z-[-1]from the footer *(by the way, in Tailwind you can create negative values by doing -z-1 ) * and giving the circle which you want above it a positive z-index.@Chris I still am getting the issue, I would be happy if we can decide a common time when we can talk about this together and fix this issue.
Sorry, I don't do calls. It is best to keep the conversation here in case others run in to similar issues.
You haven't updated your live link with the changes, have you?
I just pushed the change, just check it once.
Just reloaded. I am still seeing the negative z-index on the footer
z-[-1]Wait lemme check
My bad. I just pushed the commit. Although the site wont change as the change did nothing.
Also i had to put z-0 to footer else the bg-image which i put there by making the footer positioned and its child absolute was not visible.
Now the element with the number "2" is covering the entire footer.
There is no reason that I can see why it needs to be so large.
Try changing the tailwind for that element to something like this:
I'll surely check it in 12 hours... It's my bedtime... I am from India... But thanks for your assistance
I just set the z-index of the circle 1 instead of its parent div. It is working now.
Thanks anyways;
If there's something on top of the footer like the blue in Chris screenshot, people aren't going to be able to click buttons or interact with it ; try to be conservative woth the zindex; you shouldn't have to apply it to many things , pseudo elements excluded; you'll experience more side effects than you need to if your consistently changing the stacking contexts.
Which is what I initially suggested 😉
Thanks @Chris and you too @clevermissfox for being there.