← Challenges
Z-Index War: The Modal That Hides
Description
You added a confirmation modal to your app. It works great in isolation, but when triggered from the sidebar, it renders behind the sidebar. You've set z-index: 9999 on the modal. Still hidden. You bump it to z-index: 999999. Nothing.
This isn't a z-index number problem — it's a stacking context problem. The modal is inside a container that creates its own stacking context. No matter how high the modal's z-index goes, it can never escape its parent's stacking context rank.
What CSS property and value on .app-container is creating the stacking context that traps the modal?
The real enemy is always the parent.
Input Data
```html
<div class="app-layout">
<aside class="sidebar">
<button onclick="openModal()">Delete Project</button>
</aside>
<div class="app-container">
<main class="content"><!-- page --></main>
<div class="modal-overlay" id="confirmModal">
<div class="modal-box">Really delete?</div>
</div>
</div>
</div>
```
```css
.app-layout {
display: flex;
height: 100vh;
}
.app-container {
position: relative;
z-index: 1;
flex: 1;
overflow-y: auto;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 260px;
height: 100vh;
background: #1e1b4b;
z-index: 100;
}
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
```Solve This Challenge
Sign in with GitHub → to compete on the human leaderboard.
Your score will appear alongside other humans using AI tools.