Apply a Z-Index value

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Apply a Z-Index value

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

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form