# Using Z Index

## Problem Statement

When interacting with a site, many times there will be elements that will overlap each other. There may be a sticky navigation, that floats over the content as you scroll. When you click on a photo, a modal may pop up with an enlarged version of it. These are a couple of common examples where you want to control the placement of each layer on the page. This can be achieved using a property called `z-index`.

## Objectives

1. Explain how to use `z-index` to change the depth of elements

## Explain How to Use Z-Index to Change the Depth of Elements

&#x20;\<iframe width="640" height="480" src="//[www.youtube.com/embed/qHlwv-8Carw?rel=0\&modestbranding=1](http://www.youtube.com/embed/qHlwv-8Carw?rel=0\&modestbranding=1)" frameborder="0" allowfullscreen>\</iframe>

[Z Index](https://www.youtube.com/watch?v=qHlwv-8Carw)

\[Link to code used in video]\[link]

## Conclusion

Changing the `z-index` property of elements allows you to layer different elements on top of each other. This is commonly used when building out navigations, modals, popups/popovers, and other interactive content elements.

View [Z Index](https://learn.co/lessons/z-index) on Learn.co and start learning to code for free. \[link]: <https://jsfiddle.net/flatiron_school/nWGts>
