In this lesson:
- What is a z-index value?
- 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.
- 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
