How z-index works in CSS ?
In this article we are going to see how z-index works in CSS. Z-index works as a stack for the elements that are visible on the screen. We can assign number to z-index property to assign it a position in stack. Assigned number can be negative. Greater number assigns front position and lesser number assigns behind position. Consider example that an img tag has z-index as 1 and another h1 tag has z-index as 2. So tag with z-index equal to 2 will appear before z-index equal to 1, i.e. h1 tag content will appear stacked on img tag. Default z-index is 0 for all elements.
Approach: In this example we will use an image tag and header tag to stack on each other. We will assign z-index to image tag.
Example 1: In below code we try to stack h1 header on image by assigning image tag a z-index of -1.
Example 2: In below code we try to stack image on h1 header by assigning image tag a z-index of 1.