How do I set z-index in Webflow?

Set position before you set a number

Z-index controls which element paints on top when two elements overlap. Webflow's position article says the z-index field is in the Style panel for relative, absolute, fixed, and sticky. It does not work while the element is static. Static is the default, and the only reason to set static is to remove positioning you already applied.

Select the element. In the Style panel, open Position. Choose relative, absolute, fixed, or sticky. The z-index field is with those controls. By default the value is auto. A higher number stacks above a lower number. You can use an integer from 0 through 2147483647. A negative value can place the element under most other elements, so you may lose sight of it.

A positioned element already paints above a static element it overlaps, even when you leave z-index on auto. Webflow's position article says static elements always stack lower than elements set to relative, absolute, fixed, or sticky. Set a number when two positioned elements overlap and the wrong one is in front.

Raise the parent, not only the child

Children stack inside their parent. If element A has a higher z-index than element B, a child of B can never sit above A, no matter how high that child's number is. When z-index is auto, the element shares its parent's stack order. Both the position article and the z-index article describe that parent limit.

Example: a dropdown opens under the next section. The menu is inside the navbar, and the section is a sibling of the navbar. If both the navbar and the section are positioned, raise the navbar. A huge number on the menu alone cannot climb out of a navbar that sits below the section.

A badge on a card is the other case. Set the card to relative so the badge can be positioned inside it. Set the badge to absolute and give it a z-index of 1 so it sits on the photo. If a sticky navbar uses a higher z-index than the card, the badge stays under the navbar while you scroll. That is the parent rule, not a broken badge. The sticky navbar guide is where the bar's position is set. This page is only about which layer wins.

Use a small gap between layers

You do not need a giant number on every overlay. Give the navbar one number, and give page sections a lower number or leave them on auto. A small set is easier to repair when a new banner has to slip between two layers you already trust.

Example: the navbar is sticky with z-index 10, and a sale banner should sit above the page and below the navbar. Set the banner to fixed or sticky and use 5. The page sections can stay on auto. If the banner covers the navbar, its number is higher than the navbar, or the navbar is still static so the number on it does nothing.

Check the same overlap on a smaller breakpoint. A style set on desktop can differ on tablet or mobile. Select the breakpoint in the canvas bar before you change the number, so you do not restack the desktop layout by accident.

Confirm the overlap in preview

Preview the page and scroll. Open the dropdown, hover the card, and pass the sticky bar over the badge. The element you meant to be in front should stay in front while you scroll.

If the element vanished, look for a negative z-index. Set it back to auto or to 0 and check again. If a child still will not rise, select its parent and compare that parent's number with the element that is covering it. Fix the parent first.

A stacking fix on a live site is ordinary layout work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.