Control which element appears in front when multiple positioned boxes overlap on the screen.
1. How z-index Works
⊞Code Example
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.75);
z-index: 90;
}
.modal-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100; /* In front of backdrop */
}