This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
How Z-index Works5:41 with Guil Hernandez
When you use relative, absolute or fixed positioning on elements, you may end up with several elements occupying the same space. This can make elements overlap or completely cover up other elements from view. In this video, you'll learn to use the z-index property to determine which elements display above or below other elements.
- Fork this workspace to view the z-index demo
- MDN - z-index
- MDN - The Stacking Context
- What No One Told You About Z-Index
- CSS Tricks - z-index
- Positioned elements follow a stacking order that determines which elements display above or below other elements.
- By default, the stacking order of positioned elements is the order they appear in the source code.
- Elements appearing later in the code sit on top on elements appearing earlier in the code.
z-index propertyis directly related to stacking order and it's what prevents elements from overlapping other elements.
- An element with a higher
z-indexvalue overlaps an element with a lower
- Positioned elements have a
z-indexworks only on elements with a
positionproperty set to
- If you set a
z-indexon an element with no position, it will do nothing.
When you give a positioned element a
z-index, you establish a new stacking context for any descendants -- or children -- of that element. It's possible to have a higher
z-index element that's underneath another element with a lower
z-index. Learn more about stacking contexts here.
You need to sign up for Treehouse in order to download course files.Sign up