tw-rl

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👇 https://codepen.io/prathamkumar/pen/WNoOvYr