So, what is stacking order (Z-Index)?
The z-index property specifies the stack order of an element. The stack order effects the way in which different elements are displayed on your site.
When two elements overlap, an element with a greater stack order is always in front of an element with a lower stack order. For example - the background should always have the lowest Z-index, while elements which are presented on top of it will have a higher Z-index.
Keep in mind - stacking order only affects elements within the group they are in. For example, one group could have a parent (Container/div), and 3 children (Images). The children could have different z-index (Which means they will be displayed one on top of each other), but their Z-index won’t be relevant to the entire page (meaning elements that are higher or lower in the stacking order of the entire page could be displayed on top or below of them).
When will we use Z-index?
The main use for Z-index is to change the order in which elements are displayed on a web page (for example, which element will be on top when two elements overlap).
How do I change my element’s stacking order?
All it takes is a few short steps to change your element’s Z-index. There are two ways to do so:
1. Changing Z-index using right-click
- Pick the element you wish to change the stacking order for
- Right-click on the element
- Under arrange, you will have four options:
- Bring to front: Gives the element the highest Z-index possible for the element, resulting in it being displayed on top of all other elements in the same section.
- Bring Forward: Moves the element’s Z-index up
- Send Backward: Moves the element’s Z-index down
- Send to background: Gives the element the lowest Z- index possible (within the section it’s in), resulting in the element being displayed below the other elements within the same section.
2. Changing Z-index using the options panel:
- Pick the Element you wish to change the stacking order for
- Click the options panel (which is the bottom panel at the top right corner of the screen)
- At the bottom of the panel you will have a row with three stacking options:
- Typing manually the z-index for the element
- Move forward button - which will move the element’s Z-index up
- Send backward button - which will move the element’s Z-index down
Now you know how to change an element’s Z-index! This can help you greatly in organizing the different layers of your website.
!RapidTip If an element is not reacting (for example, you made a form but can’t seem to type in the inputs), there could be another element’s space with a higher Z-index on top of our element, hence “blocking” our element from reacting to our actions. Try changing the element’s Z-index - it may have a lower stacking order than other elements!