CSS z-index

z-index allows us to control the stacking order of the positioned elements. By default if we have multiple elements positioned on a page they will stack in the order they are added on the page.

The default value for z-index property is 0. Any higher value will move the element on top of the elements with lower values. We can also use negative values to move elements behind other elements.

Each of the squares below have an absolute position. Because they all share the same position the last element in the HTML document will be the visible box. The blue box, or .box:nth-child(3) is the visible box on top.

By assigning z-index: 1; to the .box:nth-child(1) we change the layer order of the first .box HTML element. The green box is now on top of the blue and red boxes as their z-index is default of 0.

By assigning a higher z-index to the .box:nth-child(2) the red box, it now has the highest layer order and is the visible box on top.