Thread by @Prathkum

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👇

Play around with code for better understanding. Any doubts? Post below👇

codepen.io/prathamkumar/p…