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.
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.
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.
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.
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: CSS pointer-events property
You would add the custom css to the Head of the site or the page in custom code.
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 ^^
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 ^^