Streaming live at 10am (PST)

Z-index problems


#1

Hello ,
I think I messed up with the z index, now I can’t click the ctas on my pages. Someone can help? I can’t find the proper fix :confused:

https://preview.webflow.com/preview/mcag-digital-guidelines?preview=75c49766d1dd3f19700be14acd2511d1

Thanks!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @mrpennisi, thanks for the question about the z-index. It is not immediately apparent to me which CTA you are referring and on which page.

Could you help to share the page and screenshot of the element you are trying to access?

As a note, if you have an element that has a higher z-index than another element, you can temporarily set the element with higher z-index to display none to get access to the lower z-index element.


#3

Hi @cyberdave anbd thanks for your reply. I’ve setup the page as a home page, just in case it’s this one


Probably it’s an obvious thing, but I’m in tunnel vision right now :confused:


#4

Hi @mrpennisi, thanks for that, is it the button you are unable to access?


#5

Hi @cyberdave
all of the buttons in this page ( the only one linked for a test is actually the one in the slide with the red hair girl)


#6

@cyberdave just in case I’ve added a link also to the first CTA ^^


#7

The problem is that it is working exactly how you’ve designed it. You have it built so that the container with your CTA is underneath the images when they slide over it. You’re kind of trying to have it both ways. The button is either underneath those containers with the images, or it is above them.


Position fixed z-index don't work
#8

Hi @Cricitem, and thank you for your reply.
The button is on a higher hierachy and has a better z-index. What am I missing?


#9

z-index does not work in QUITE the way it seems like it should. z-index only applies to an element in so far as its nearest parent is concerned. If your button’s nearest parent has a z-index of 0, then that button can only ever achieve an overall z-index of 0. If you give that button a z-index of 100, it will only appear “on top” of sibling elements that have a lower z-index.

Your button is in a container that has a lower z-index than the container on top of it. The z-index of the parent element takes precedence over the button’s own z-index.

I’m belaboring the point because it is really counterintuitive.


#10

Hi @Cricitem and thank you for your reply. Can you suggest a new design solution that can allow me to obtain the same effect, but with clickable CTA?


#11

As far as I can tell, it cannot be accomplished using Webflow’s slider component. You would have to recreate the effect using interactions to move your pictures and title elements individually, without them being in slides.

It’d be a pain, but it could be done.


#12

I will figure out something else so. Thank you for the support ^^


#13

Hi @mrpennisi, I went to take a look at the read-only link again, but it seems it has been disabled.

I cannot really comment too much as I cannot see the design any longer, but another option when trying to click on something with a lower z-index, is to apply a little custom code to turn the pointer events to none on the element with the higher z-index.

See here the css for that, where you would target the class having the higher z-index: https://www.w3schools.com/cssref/css3_pr_pointer-events.asp

You would add the custom css to the Head of the site or the page in custom code.

Here are some good resources:

Using custom code in the head and body: https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

I hope this helps.


#14

HI @cyberdave and thank you for your reply.
I will try like that. Speaking of the link, I had to turn it off, due of some images that I can’t display for now. I will make some amends today and turn the share link on again ^^

Regards


#15

Hi @cyberdave, I worked with your suggestion, and now everything works fine.
I had to give poiner:none to the slider, and then give pointer auto to both the CTA and the slider arrows (oterwise I was not able to scroll the slider). Now it works like a charm, the only thing not working is of course the swipe functionality, but for now it’s fine like this ^^

Thanks for your help!!!