Apply a z-index value

Use z-index value to order stacked elements.

This video features an old UI. Updated version coming soon!
 
This video features an old UI. Updated version coming soon!

In this lesson:

  1. What is a z-index value?
  2. Use a z-index value to stack elements


What is a z-index value?

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

  1. Elements with a higher z-index value stack on top of those with a lower value
  2. 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)
  3. Z-index only works on relative, absolute, and fixed positioning
  4. Default z-index value is 0


Use a z-index value to stack elements

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

Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback