z-index: 9999 doesn't work
The badge is behind the other card. It has z-index: 9999. The card it is losing to has no z-index at all. Raising it to 2147483647 changed nothing, and neither did position: fixed.
The yellow badge hangs off the corner of the blue card and is supposed to sit on top of the green one. It is behind it.
The starter already gives it z-index: 9999, which is the number everybody reaches for and it is doing nothing. Bigger numbers do not help. Neither does position: fixed.
Read the base stylesheet. The cause is in there, on a line that has nothing to do with stacking, and it is one character away from not being a bug at all.
Get the badge painted above the green card, with both cards still visible, still fully opaque, still their original size, and the badge still hanging off the same corner.
Hint
A z-index sorts an element against its siblings inside ONE stacking context. Which context is the badge in, and what put it there?
The fixture — markup and base stylesheet
You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.
<div class="stack"><div class="card-a"><div class="badge"></div></div><div class="card-b"></div></div>
*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #0b0b0f; color: #e8e8ef; font: 16px/1.4 system-ui, -apple-system, sans-serif; } .stack { position: relative; width: 600px; height: 240px; background: #16161d; } /* The designer wanted this card to sit back very slightly. */ .card-a { position: absolute; left: 20px; top: 20px; width: 320px; height: 200px; background: #22323f; opacity: .99; } .badge { position: absolute; right: -30px; top: 60px; width: 80px; height: 40px; background: #ffd166; } .card-b { position: absolute; left: 300px; top: 40px; width: 220px; height: 140px; background: #b5e48c; }