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.
When you use relative, absolute, or fixed positioning on elements, 0:00 you may end up with several elements occupying the same space. 0:04 This can make elements overlap or 0:08 completely cover up other elements from view. 0:10 For example, when you scroll down The Best City guide page, the entire 0:13 figure element overlaps the fixed header when it reaches the top of the page. 0:18 So why isn't it scrolling under the header like the rest of the content on the page? 0:23 You see, positioned elements like the header and figure follow a stacking 0:32 order that determines which elements display above or below other elements. 0:36 And by default, the stacking order of positioned elements, 0:42 is the order they appear in the source code. 0:45 So elements that appear later in the code, 0:48 sit on top of elements that appear earlier in the code. 0:51 In the HTML, the figure element appears below main header in the source code. 0:56 Because of this, the figure element is higher than main-header in the stacking 1:03 order so it overlaps it. 1:07 We can adjust the stacking order of relative, absolute, 1:09 and fixed positioned elements with the z-index property. 1:13 The z-index property is directly related to stacking order and 1:16 it's what prevents elements from overlapping other elements. 1:20 It's called z-index because it affects an element's position along the z axis. 1:23 When you position an element top, right, bottom, or left, 1:29 you're positioning the element in two dimensional space on the x and y axis. 1:33 So, z-index adds a third axis to your page, called the z-axis. 1:39 And this axis moves elements towards the front and back of the page. 1:44 An element with a higher z-index value 1:48 overlaps an element with a lower z-index value. 1:51 For example, an element with a z-index of 20 will appear 1:55 over the top of one with a z-index of ten. 1:59 And an element with a z-index of 30 will appear over one with a z-index of 20 or 2:02 10. 2:08 Positioned elements have a z-index of zero by default. 2:09 So to position main-header over the figure element, 2:13 I can give it any z-index value higher than zero. 2:17 So right below the top declaration, 2:21 I'll add a z-index property, and give it a zindex value of one. 2:25 So now I have established a new stacking order for main header. 2:32 And when I scroll the page, notice how the figure scrolls under the header. 2:36 So great, it's fixed. 2:42 Back in my style sheet, if I give icon location a z-index 2:47 that's slightly higher, so let's say z-index two, 2:51 now the icon has a higher stacking order than the main header, 2:56 so it overlaps the header when they occupy the same space. 3:01 So, I'm going to define a much higher z-index for main-header just in case I 3:12 decide to add more positioned elements to the page later. 3:17 So, I'll change the z-index value from 1 to 1000. 3:21 This way I know my header will be the highest in the stacking order. 3:26 Remember, z-index will only work on an element with a position property set to 3:34 absolute, fixed, or relative. 3:39 If you try to set a z-index on an element with no position, it will do nothing. 3:41 Also, when you give a position element a z-index, you establish a new 3:46 stacking context for any descendents, or children, of that element. 3:51 For example, if I apply relative or absolute positioning to the name or 3:56 main-nav elements inside main-header and give them a z-index. 4:02 That z-index value will be relative to main headers z index of 1,000. 4:08 So it is possible to have a higher z-index element that's 4:15 underneath another element with a lower z-index. 4:19 And you can read more about stacking context in the teacher's notes. 4:22 I suggest experimenting with the z-index values on your own. 4:26 It's a concept that's best understood by adding positioned and non-positioned 4:30 elements to a page and experimenting with the different z-index values. 4:34 In the teachers notes, you'll find a link to a work space demo on z-index. 4:39 Congrats, you've come a long way as a designer and developer of CSS layouts. 4:43 Now that you understand the strengths and benefits of 4:48 using layout methods like inline block, floats, and positioning you should start 4:51 thinking about how to use them in your projects to build amazing layouts. 4:55 So what's next? 4:59 Well to practice what you've learned in this course right now you can 5:01 build the other pages of the Best City Guide website. 5:04 Or use the project from this course to create your own portfolio site. 5:07 You can redesign the layout of your website using a mobile first approach, or 5:11 revisit recent projects and 5:16 see if you notice any of the strange browser behaviors covered in this course 5:18 like collapsing containers or overlapping elements. 5:22 And if you notice any, now you know how to fix them. 5:25 The Treehouse community is always here to help. 5:28 So if you have questions about anything covered in this course feel free to 5:30 reach out to the Treehouse staff, other students, 5:34 or you can get ahold of me on Twitter, I'm @gilage. 5:36 Thanks, everyone. 5:39
You need to sign up for Treehouse in order to download course files.Sign up