What is the CSS z-index property?

The z-index property controls the stacking order of overlapping elements on the z-axis (depth). Elements with a higher z-index appear in front of those with lower values. z-index only works on positioned elements (those with position: relative, absolute, fixed, or sticky) — it has no effect on static elements. A new stacking context is created by elements with non-auto z-index, opacity less than 1, transforms, filters, etc. Elements in a stacking context are stacked independently from elements outside it — a child with z-index: 9999 cannot appear above an element outside its stacking context that has a lower z-index.