Thread by @Prathkum

Have you found the "z-index" a confusing concept of CSS?

Don't worry, the next 6 tweets will solve all of your doubts.

🧵👇🏻

z-index is a CSS property that controls the stacking order of elements along the 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 ⏬

🔹 z-index of pseudo-elements

By default pseudo-elements(::before and ::after) display on the top of the parent.

You can set the stacking order of ::before and ::after as usual but you can't display pseudo-elements below the parent...

For example, this won't work 👇

In order to display the pseudo-elements below the parent element, you just need to remove the z-index from the parent itself. For example:

As simple as that 😁

If you like this short and simple thread, drop and like and retweet, it means a lot to me ❤