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
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>
[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
Last updated