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!
Transcript
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

Clone this project
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

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