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-indexto change the depth of elements
[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