About Layering and z-index
The z-index property controls stacking order along the Z axis. It works only on positioned elements.
Typical issues arise due to new stacking contexts: for example, the parent has transform or opacity.
Modal windows often use fixed positioning and a high z-index to appear above the UI.
The backdrop darkens the background, focusing the user’s attention on the dialog.
It’s important to maintain hierarchy: modal content must be above the backdrop.
Semantic, clean markup improves maintainability and accessibility.