CSS z index not working (Reason with solution live snippet code)

What is z-index in CSS? z-index is a CSS property that controls the stacking order of positioned elements. It determines how elements are layered and displayed on top of each other when they overlap in a web page's layout. The z-index property only w...