new course
CSS grid landing page tutorial (36min)

Lesson info

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.

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared it in the link right under this very paragraph.

View and clone this project
Clone this projectDownload project assetsDownload lesson assets

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.