z-index stacking issue with React fullpage.js

Question

Check demo here: https://p6msv.csb.app/

I cannot figure out how to get this 'more info' modal to sit above all other elements on the screen.

the following is the desired stacking order, first being the highest stacked element:

• modal
• nav open
• header
• fullpage.js section

Anyone see something I'm missing?

Answer 1

I don't quite sure understand your problem but for the modal consider using the fullpage.js option normalScrollElements or even disabling the whole fullPage.js scroll when opening it by using fullpage_api.setAllowScrolling(false) .

Also, any fixed element should be placed outside the fullPage.js wrapper. This is a bug in a few browsers when dealing with 3d css transforms.

If you can't move it for some reason, you can try using the fixedElements option or even moving away from 3d transformations by using scrollBar:true or css3: false .

More about all these options and methods on the the fullpage.js documentation