React-modal: Element behind is overlapping react-modal

Created on 27 May 2017 · 6Comments · Source: reactjs/react-modal

Summary: Part of the element from the background is overlapping even if react-modal is present.

I'm using react-dates from Airbnb and part of the component of the calendar such as navigation button and help button (green question mark) is overlapping even when the react-modal is presented. Everything else works fine.

Does anyone have an idea why this is happening?

screen shot 2017-05-28 at 12 25 47 am

help wanted

Source

darylong

Most helpful comment

There may be a better solution by the package author, but you could set the z-index style on the overlay. You can put something in your CSS like:

.ReactModal__Overlay {
    z-index: 1000;
}

That worked for me. Let me know how it goes.

matthew-matvei on 28 May 2017

👍23 🎉2 😄2

All 6 comments

There may be a better solution by the package author, but you could set the z-index style on the overlay. You can put something in your CSS like:

.ReactModal__Overlay {
    z-index: 1000;
}

That worked for me. Let me know how it goes.

matthew-matvei on 28 May 2017

👍23 🎉2 😄2

Hi @matthew-matvei , thank you so much for the solution. It was really silly of me for not thinking to modify the z-index. Definitely appreciate the quick fix to the problem.

Would also be curious to find out what was the root cause to the problem as I'm relatively new in React development. Thanks again!

darylong on 29 May 2017

No worries.

Apparently, React decides Z-index based on the component's order in the render tree. Given that it's likely you'll have other components down the line from where the modal is placed, I guess you'll probably have something overlapping by default (unless there's something else we've both neglected ;-) )

matthew-matvei on 29 May 2017

❤1

@darylong is this a fix for your issue? If so, you can close this.
@matthew-matvei Thank you!