Managing the Stacking Order of Elements

The z-index property determines the stacking order of positioned elements on a web page. It only applies to positioned elements, which have a position value of absolute, fixed, relative, or sticky. As the elements are taken out of the normal document flow, to determine which of these positioned elements should be displayed higher or lower, we specify z-index.

The higher value the z-index property has, the higher the element is shown on the user screen.

Let's practice. We have four div elements with the box class, each styled as a square and numbered to represent their order in the html document. The squares are currently positioned on top of each other. The task is to adjust the z-index property with the correct values to bring square 3 to the front and send square 4 to the back.

Note

If we set the same value for the z-index property to different elements, the browser will show the elements in the order in which the elements are in the html file.