CoreUI - modal from within default header shows behind backdrop

I'm using Core-UI's admin template for the console of the open source project cog1. It's great, but I'm having trouble using modals from within the drop-down menu present on the default header component. Showing modals from any component inside the main container (i.e. where content is rendered as routes change) works just fine. However, doing it from the default header (which sits as as a sibling of the main container), makes the modal appear behind the backdrop. I could change the z-index of the header component, but that makes the whole header appear in front of the backdrop, which is not right.

I've added a big button on the default header itself, to illustrate the issue. Here's how it looks when I click on the "Launch demo modal" button:

What could I do to have the modal work as it does on any other component placed in the main container?

So long story short, you need to move the dialog to the bottom of your page, so that it get's rendered above the other elements.

Long Story:

You need to make sure the modal that is being opened is the last element inside the body tag.

Remember HTML is like stacking paper on top of each other, where the first element is at the bottom and the last element is at the top.

Obviously this is where z-index comes in, where we can override this stacking, but sometimes z-index does not help, at these times, you need to consider the position of the dialog relative to other elements.