Slider z-index problem and position fixed doesn't work

Hi, I’m having an issue with slider and position fixed. I’m working on a project that has a slider and each slide has a pop up. In order to create the popup, I’m setting a div block position fixed and cover the entire page. But, it’s not working. The div doesn’t cover the entire page. I’d really like to have the solution. Thanks in advanced.


Here is my public share link: https://preview.webflow.com/preview/the-gem-hunters?utm_medium=preview_link&utm_source=designer&utm_content=the-gem-hunters&preview=35147098013846b7b276abea11dc8dd3&pageId=611ca6ba8f29a876e216c030&workflow=preview
(how to access public share link)

The link is not working, please update it.

https://preview.webflow.com/preview/the-gem-hunters?utm_medium=preview_link&utm_source=designer&utm_content=the-gem-hunters&preview=35147098013846b7b276abea11dc8dd3&pageId=611ca6ba8f29a876e216c030&workflow=preview

Hello Moshiur, the problem is that the mask element has an overflow value of ‘hidden’. The solution for this is very simple.

Just go to the mask element and set the overflow property to ‘visible’

If this solves your problem please mark this answer as the solution and give it a like to help keep the community tidy!

1 Like

Thank you very much for your help! Really, appreciate it. But, I have a question. Why the div doesn’t cover the entire view port. I set it top:0, left:0.

It acts like the slider is it’s parent. When I move it from top by 4rem, it’s moves from the slider. But, the position fixed relative to the viewport.

I’ve another popup on this site. That is not inside the slider. That is working properly.
Here is the preview link Webflow - THE GEM HUNTERS

Happy to help!

I see the problem you are facing and I assume it has to do with how WebFlow implements the slider. Here is a workaround that you could find a way to implement in your own project

1- Set the whole slider (‘.mews-slider’) to have a position of fixed
2- Decide where you’d like to place it (in your case that’s upper left)
3- Make sure that it has a high enough z-index.

This works because now you are operating on the slide as an element, so it behaves as expected. The way you’d implement this could be throw setting these styles on a class, and use javascript to toggle that class on and off when you’d like the pop-up to appear. Hope this answers your question!

Thanks again for your kind help. I’m really very happy for that. But, I’ve more content before the slider and they cover the viewport( 100vh). Then user scroll, they see the slider. But, if I set position fixed on the slider then, the slider won’t be under the first( Hero) section. :sob:

You don’t have to set the slider like that initially. Read my last part of the answer. You’ll need some knowledge of JavaScript, but you can set that styling (of the slider being positioned as fixed) to a class, then toggle this class on and off using JavaScript as needed.

1 Like

I’m sorry! Now I understand what you meant. Yes, I can toggle the class. Thank you very much for your help :slight_smile:

Glad I could help! Please choose my last reply as the answer if it helped you, so that the forum stays tidy and whoever faces the same problem can later find the solution as well.

Hi thanks for sharing Also check the new Best latte Machine for making coffee. https://lattemachinehub.com/