Apply a z-index value

Use z-index value to order stacked elements.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top