Code Editor
Web Browser
Learn
Layout

Z-Index

When boxes on a web page have a combination of different positions, the boxes (and therefore, their content) can overlap with each other, making the content difficult to read or consume.

.box-top { background-color: Aquamarine; } .box-bottom { background-color: DeepSkyBlue; position: absolute; top: 20px; left: 50px; }

In the example above, the .box-bottom div ignores the .box-top div and overlaps it as a user scrolls.

The z-index property controls how far "back" or how far "forward" an element should appear on the web page.

The z-index property accepts integer values. Depending on their values, the integers instruct the browser on the order in which elements should be displayed on the web page.

.box-top { background-color: Aquamarine; position: relative; z-index: 2; } .box-bottom { background-color: DeepSkyBlue; position: absolute; top: 20px; left: 50px; z-index: 1; }

In the example above, we set the .box-top position to relative and the z-index to 2. We changed position to relative, because the z-index property does not work on static elements. The z-index of 2 moves the .box-top element forward, because it is greater than the .box-bottom z-index, 1. See the example image below:

In the image above, you can see the top box is moved in front of the bottom box.

Report a Bug
If you see a bug or any other issue with this page, please report it here.