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 at the example image below:
Instructions
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!