Lesson info

You can alter an element's z-index to change its position along the z-axis (an imaginary dimension that extends into and out of your computer screen, creating the illusion of depth). Increasing the z-index on an element allows it to "sit on top of" elements with a lower z-index, and lowering the z-index can make an element sit beneath elements with a higher z-index. But z-index only works with elements that have relative, absolute, or fixed positioning.

In this video, we'll show you how to use z-index on relative, absolute, and fixed position elements in Webflow.

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

Even for 2D elements, our third dimension, the z-axis, represents stacking order. In other words, what elements stack or overlap on top of other elements? Changes to z-index don't actually move our elements. This isn't controlling real depth. But z-index does help us position elements when we stack them.

Essentially, elements with a higher a z-index value show up on top of elements with a lower z-index value. There are some caveats:

If we have two elements (each of these elements has children), z-index will control stacking for those parent elements. But if element A has a higher z-index than element B? The children of element B can never overlap any part of element A. Even if the z-index is 700 billion.

Let's look at this in the Designer. Three div blocks, side-by-side. Our intention here is to have the middle div block overlap the outside div blocks. The normal stacking order here is that the first one is on the bottom; the second one is above that, and the third is above that.

Let's select the middle div block, which is set to relative positioning (keep in mind that z-index is only available on relative, absolute, and fixed positioning). And let's set the z-index to 1. Now it stacks on top! That's because the default z-index is zero. Keep in mind that setting the z-index to a negative value means we could lose element visibility because it'll get rendered underneath most elements.

Let's select the left one and set the z-index to 2. What's going to happen? Well, like we learned in AP Calc, 2 is greater than 1. So of course, it'll stack above. Let's select the right one. Set it to 2 as well. Or 3. Doesn't matter. It's greater than the middle div block which is set to a z-index of 1. If we set our middle guy to 4? You get the idea.

So, Z-index. We can control the stacking order of elements, with higher values stacking on top of lower values.

Related tutorial

Z-Index

1:49