The z-index problem in CSS
You've likely come across - so have I - no matter how high of a z-index value you set, the element simply refuses to go on top of the other element.
Fix
The reason this happens is because of "stacking contexts" in CSS. Essentially, think of Photoshop layers and then re-order your elements in the DOM structure so that they're at the same level.
Josh Comeau's blog post explains this extremely well, do go through it thoroughly: joshwcomeau.com/css/stacking-contexts