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

<iframe width="640" height="480" src="//www.youtube.com/embed/qHlwv-8Carw?rel=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>

Z Index

[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 on Learn.co and start learning to code for free. [link]: https://jsfiddle.net/flatiron_school/nWGts