Webflow sync, pageviews & more.
NEW

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.

Rate this answer

Other Webflow Questions