Hi Matthias,
I am struggling with this too and it’s a bit more complicated than just “setting the z-index”…
I too have a fixed element on my site (the login keyhole) which “floats” over background text, etc.
This means that I have to be sure that any interactive elements (buttons and form fields) are layered above it in the z. That includes the buttons that load the ACFFEF modal. But then the modal needs to be above everything, including its own launcher button, right?
When setting z-index as you probably already know the element has to have a position other than static. No problem. Relative usually works.
However there are two other problematic twists to z-index which is that it ALSO follows the hierarchy of parent child child child child AND there are circumstances when unpositioned “static” elements will stack on top of positioned ones on which you set a z-index and wonder why it doesn’t work…
In other words just giving the modal a high z-index didn’t solve the problem. Here’s why…
check these posts:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
https://www.freecodecamp.org/news/4-reasons-your-z-index-isnt-working-and-how-to-fix-it-coder-coder-6bc05f103e6c/
You can see my problem here: https://www.artisanmodern.com/participate.
I have two separate ACFEFs. Getting them on top of my keyhole was not a problem, but getting them to not interfere with one another is so far only partly resolved.
Thread Starter
Matt
(@mybcn)
Hi Violetta,
Thank you for your input and for sharing your knowledge, much appreciated. Every day is a school day! I did not know the level of complexity of the Z-level and its limitations. But regardless wouldn’t a Z-level option at least solve some issues, like mine? My setup is not multi-layered, I just have one Z, set to 1 for some texts on Google Maps, that’s it. Unfortunately, I have to use the Frontend on those very pages and the text overwrites the Form. It feels like being able to set the Form to Z-level 2 (or higher would sort that out, but I honestly don’t know. My problem is not breaking anything, it’s more cosmetic than anything else. Yours on the other hand… Good luck with your 2 Front End Forms!
Regards,
//Matt
