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.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I recreate the "timeline" design found on the Mission page of my website using Webflow?
How can I upload a Dropbox video and set it as the background on my webpage using Webflow? My browser is Safari 9, and I have been struggling with the code.
What referral program service have you used to integrate with Webflow?
What are the steps to troubleshoot issues with the Finsweet script not working in Webflow, causing the cookie banner not to appear and console errors to occur?
How can I style the bullet text of a list in Webflow when editing a blog post in the CMS?
How can I create AMP (Accelerated Mobile Pages) in Webflow? Can you provide guidance on how to implement AMP on my website built in Webflow?
Is there a way to customize Webflow's form to show personalized results for each user and prevent multiple people from seeing the same test results when using it without the login function?
What is the best Webflow architecture for a website with four sales markets, each with their own requirements, copy, and graphics? Should I use one project with duplicate pages for shared content or four separate projects with duplicate everything? Also, how do I ensure proper SEO implementation for either option?
Can I replace a font with my preferred one in Webflow without having to manually change each piece of text individually?
How can I make an embedded video in Webflow loop once it finishes? Can I remove the video controls on hover?
Why did the checkout button disappear after connecting PayPal and enabling checkout on my Webflow website?
How can I add a File Upload component to my Webflow site's new employment opportunities section, as the Designer isn't allowing me to do so?
How can I center elements using CSS in Webflow?
How can I use Webflow forms to handle Mailchimp signups with checkboxes for group opt-ins?
Can Webflow's interface be used to link buttons to filter and sort collection lists, similar to how the Isotope plugin allows for filtering and sorting?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?