Where can I find and adjust the Z index in Webflow?
TL;DR
- Select the element in Webflow, go to the Style panel, set its position to something other than Static, and input the desired Z-index value.
- Preview your design to confirm the element’s stacking order behaves as intended.
To adjust the Z-index of an element in Webflow, you’ll need to use the Style panel under the Positioning settings. Here's exactly where to find and change it:
1. Select the Element
- Click on the element you want to adjust directly on the canvas or through the Navigator panel.
2. Go to the Style Panel
- On the right-hand side, open the Style panel (paintbrush icon).
3. Set Positioning
- Scroll to the Layout section.
- Set the Position to anything other than “Static” (e.g., Relative, Absolute, or Fixed). Z-index only appears when the position is not static.
4. Adjust the Z-index
- Once a non-static position is chosen, a Z-index field will appear below.
- Enter a positive or negative number to control stacking order:
- Higher numbers appear on top of lower ones.
- Negative values can push elements behind others.
5. Test Layering on Canvas
- Move elements around or preview to ensure the stacking behaves as expected.
Summary
To adjust Z-index in Webflow, select your element, apply a non-static position in the Style panel, and then set the desired Z-index value to change its stacking order on the page.