Z-order issue - Custom new row dialog appears "underneath" bootstrap navbar.

I have a custom dialog which is launched when the new row button is pressed, but the top of the dialog is obscured by the bootstrap navbar, ie: its below the bootstrap navbar in the z order.

I added a style to the navbar setting the z-order to 0, which fixed the issue, but the side effect is that dropdown menus from the navbar now appear underneath (z-order) edit controls etc, on the page.

I will provide some sample code to illustrate...