Exploring Z-Index

Matthew Welch
Sep 2, 2018 · 2 min read

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.

Matthew Welch

Written by

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade