Apply a z index value - Webflow help

Mr Bird
Mr Bird
@mrbirddev

Use z-index value to order stacked elements

📄

Layering elements with z-index - Web design tutorial (using the Old UI)


What is a z-index value

The z-index value controls the stack order of an element.

  • Elements with a higher z-index value stack on top of those with a lower value.
  • Child elements can only stack according to their parent element. (i.e., If element A has a higher z-index than element B, the children of element B will never overlap element A.)
  • Z-index only works on relative, absolute, and fixed positioning.
  • Default z-index value is 0.

Use a z-index value to stack elements

  • Select a div block you'd like to position.
  • Apply a z-index value (because the default z-index value is 0, anything greater than 0 will position an element on top).
  • Higher values will stack on top of lower values.
  • Negative values can cause elements to disappear.
⚠️

Negative z-index values may cause elements to disappear behind other elements. Use caution!


Back to webflow help