The z-index can be adjusted to change the default stacking order of elements. By default, elements with a relative, absolute, or fixed positioning stack on top of each other. Elements at the bottom of a page stack above elements above them, and elements on the right stack above elements on the left. Increasing the z-index on an element higher in the page allows it to overlap an element lower on the page.

Changing the z-index doesn’t actually move an element. In the case where we find overlapping elements, it just helps an element either overlap or underlap another element.

The z-index can be adjusted to change the default stacking order of the element in Webflow.

Setting z-index

Webflow z-index

The z-index is only available on relative, absolute, and fixed positioned elements. To change the z-index on an element:

  1. Go to the Layout section of the Styles Panel
  2. Set a position value of relative, absolute, or fixed
  3. Type in a z-index value in the field that appears

Here’s an example of increasing a z-index on an underlapping element to make it overlap other elements:

 

Z-index values

The z-index value determines the stacking order of elements. Higher values stack on top of lower values.

 

Default value: auto

Even though all elements have the default z-index value of auto, by default they stack in the order that they appear in the document flow. That is elements on the left are stacked below elements on the right, and elements on top are stacked below elements on the bottom.

Simply changing the position to relative, absolute, or fixed will make it stack higher than elements with position auto.

Number values

Z-index values can be any integer from 0 to 2147483647. You can also use negative values, but keep in mind that with negative values you can lose element visibility because it'll get rendered underneath most elements. Also, note that elements with a negative z-index and all of their children can only be selected in the navigator and not on the canvas.

Z-index on nested elements

When the z-index is set to auto, it actually means the stack order of an element is equal to its parent’s stack order. They can be stacked relative to the parent element but remain within the parent element’s z-axis relative to other elements.

So, if an element A has a higher z-index than an element B, a child element of element B can never be higher than element A. No matter how high the z-index value of element B is.