The Z-index is a powerful yet confusing concept of CSS
Let's make it easy in this quick threadπ
π§΅
z-index is a CSS property that controls stacking order of elements along Z axis.
Image a hypothetical line starting from your eye to screen, that is Z-axis
β Note that z-index only works on positioned elements.
You need to specify the position (relative, absolute, sticky, fixed) if you want to arrange an element using z-index
π z-index of nested elements
Let's say two elements A and B are siblings with element B written after element A in DOM, then the children of element A cannot be higher than element B no matter what z-index is being applied on children
See this in actionπ