[Solved] How to use z-index to position elements?

Question

So i have the following code and i want to know if it's possible to place blue div above black(opacity:0.7) div and have that white strip below the yellow div but it should be above black div as well. If it is , then what exactly i need to do and if it's not then how should i rearrange the divs ?

Any help is much appreciated, ty !

https://code.sololearn.com/W62Hlx2LK9G3/?ref=app

Edit: I know how to use z-index but just can't figure how to do what i asked for.

Edit2: I believe it's not possible with the current div setup so i will be rearranging them and let others know of the solution later on, but till then i will keep it open .

Edit3: thank you everyone for your time , the only way i found is to move blue in front , so it is above black div and to push the white strip down by 40px which gives an illusion of the top of strip below yellow while it is still above black.

Answer 1

Azhagesanヾ(˙❥˙) thank you but blue div should be above black div not yellow.

Answer 2

WileyR ?? I know how to use z-index . Anyway ty :)