Where can I find and adjust the Z index in Webflow?

TL;DR
  • Select the element in Webflow Designer and open the Style panel.
  • Locate the Z index under Position settings and adjust it with a numerical value.
  • Preview or publish the changes to see the updated stacking order.

To adjust the Z index in Webflow, you'll need to modify your element's styling settings. Here's how you can find and adjust it:

​

1. Select the Element

  • Navigate to the element you want to adjust within your Webflow Designer.
  • Click on the element to select it; this will open its settings in the Style panel on the right.

​

2. Open the Style Panel

  • Once the element is selected, ensure that the Style panel is open. This is where you'll find the Z index settings.

​

3. Locate the Z Index Setting

  • Scroll down in the Style panel to find the Position settings.
  • Look for a property labeled “Z index” or simply “Z” to adjust stacking order.

  

4. Adjust the Z Index

  • Enter a numerical value in the Z index field to set the desired stacking order. Higher numbers bring elements to the front.

​

5. Preview or Publish

  • Preview the changes in Webflow to ensure the stacking order appears as expected.
  • Publish your project if you're satisfied with the changes.

​

Summary

To find and adjust the Z index in Webflow, select the element, open the Style panel, locate the Z index setting under Position, and set a numeric value to control the stacking order.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I import my HTML and CSS custom code into Webflow?
What is a reliable way to randomize the hero header content in Webflow's CMS collection so that it displays a different collection each time the page is reloaded, and is easily updatable by the client in the future?
How can Webflow be configured to improve mail-client-friendliness and avoid emails being marked as spam when testing form emails?
What could be the issue if the Webflow Onboarding Form (Full Page) is showing "Oops! Something went wrong while submitting the form" even though the Form Block setting is set to Method: GET and reCAPTCHA has been turned off and published on the site?
How can I use JavaScript to move a specific <div id="me"> element, including its content, into another <div class="this_target"> element in Webflow?
Why do some of my SVG images with animation and mouse interaction not appear on my Webflow site when viewed on Safari and iOS devices, even though they display fine when directly opened in a browser? Have others experienced this issue? Thank you for your help!
What is a solution for correctly wrapping text in Webflow and preventing overflow on smaller screens?
How can I fix the issue of input fields stretching vertically and select boxes stretching horizontally in IE compatibility mode on a Webflow site? The code I tried, including the tags, doesn't seem to work.
Is Webflow GDPR compliant and suitable for European clients, considering factors such as hosting location, cookie usage, and collection of private data? What are the experiences of Webflow designers working with clients in Europe and how do they address GDPR compliance?
How can I resolve the issue of my OG images not being downloaded on my Webflow site, as indicated by the error message from the Facebook Debugger?
How can I create a dynamic drop-down filter for a CMS list in Webflow, similar to the one on this website? Thanks!
Has anyone used Passage by 1Password with the Webflow built-in user CMS?
How can I disable the default form submission and redirect functions in Webflow without breaking the code, while still being able to use my own JavaScript function?
Is it possible to give separate URLs to the tabs "For Everyday" and "For Pharmacy" in Webflow and have them act as their own pages, but still be clickable and changeable using the tabs function?
What is preventing the "Current" text from changing color on the mobile version of my Webflow site when clicked?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
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?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?