Learn

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.

.blue-box { background-color: blue; } .green-box { background-color: green; position: relative; top: -170px; left: 170px; }

In the example above, the .green-box element overlaps on top of the .blue-box element.

The z-index property controls how far back or how far forward an element should appear on the web page when elements overlap. This can be thought of as the depth of elements, with deeper elements appearing behind shallower elements.

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

.blue-box { background-color: blue; position: relative; z-index: 1; } .green-box { background-color: green; position: relative; top: -170px; left: 170px; }

In the example above, we set the .blue-box position to relative and the z-index to 1. We changed position to relative, because the z-index property does not work on static elements. The z-index of 1 moves the .blue-box element forward, because the z-index value has not been explicitly specified for the .green-box element, which means it has a default z-index value of 0. Take a look the example image below:

Diagram of z-index

Instructions

1.

In style.css, set the z-index of the header to 10. Notice how the header is no longer covered by other elements when you scroll!

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?