Using Z Index
Last updated
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.
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]
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