Exploring Z-Index
If you want to give your website more dimension and a sense of depth, creating overlapping elements is a great approach. By utilizing the z-index property of an element, you can control its “depth” on the page by assigning a hierarchy of placement. Let’s take a look at the following example, where a navbar at the top should should follow the user as they scroll down the page:

Because I’ve set the positioning property to “fixed”, the navbar will stay in its location as the viewer scrolls:

Because I have now specified a position as “fixed”, I can set the z-index of this element. Z-element can be specified as long as the position property is set to either absolute, relative, or fixed.
To create a layering effect further down the page, I gave certain elements a z-index of 1, including the background image you see in the first screen cap. All elements default to an index of 0, so anything above that should float over the default elements. Take a look what happens when we set this value to 0:

As you can see, our image has now overtaken the navbar — obviously something we want to avoid, but a clear example of how important z-index is! While a potentially simple property, Z-Index can be used to create layered, compelling web UIs.