Control element stacking in Webflow through Style Panel > Position section. Set position to Relative, Absolute, Fixed, or Sticky to unlock z-index controls. Z-index only works on non-static (positioned) elements — set it to higher numbers to bring elements forward. Use Absolute positioning inside a Relative parent to create overlapping layouts without disrupting page flow.
Webflow Positioning: Relative, Absolute, Fixed, and Z-Index Stacking
Positioning and z-index are the tools for creating overlapping elements, fixed navigation bars, sticky sidebars, and layered visual effects. Unlike Flexbox and Grid which control element flow within a container, positioning removes elements from or augments the document flow to control their exact placement. Webflow's Style Panel > Position section exposes all five CSS position values with an interactive offset control UI. This tutorial covers all position types, when to use each, the z-index stacking context system, and real-world patterns like badge overlays, sticky CTAs, and layered hero sections.
Prerequisites
- A Webflow project open in the Designer with some page content
- Basic familiarity with the Style Panel (S) and Navigator (Z)
- Understanding that Webflow's Layout section (Flex/Grid) handles flow, while Position handles stacking
Step-by-step guide
Understand position types in Webflow's Style Panel
Understand position types in Webflow's Style Panel
Select any element on your canvas. Open the Style Panel (S) and scroll to the Position section (fifth section, below Size). You'll see a dropdown with five options: Static (default), Relative, Absolute, Fixed, Sticky. Static elements follow normal document flow and cannot have z-index, top/right/bottom/left offsets, or independent stacking. Relative keeps the element in flow but creates a stacking context and allows z-index — it's also the anchor for absolutely positioned children. Absolute removes the element from flow and positions it relative to its nearest Relative, Absolute, Fixed, or Sticky ancestor. Fixed positions the element relative to the browser viewport, staying in place when you scroll. Sticky is a hybrid — static until it reaches a threshold (top: 0), then fixes in place.
Expected result: You understand which position type to choose. The Z-index input only appears in the Style Panel when a non-Static position is selected.
Create an image badge overlay using Relative + Absolute
Create an image badge overlay using Relative + Absolute
The most common positioning pattern is a badge or tag overlaid on a card image. Set up your structure first: create a Div Block ('card-image-wrapper') and place an Image inside it. The Div Block should have a fixed height (or use aspect-ratio) and Overflow: Hidden. Now select the Div Block wrapper. Style Panel > Position > select 'Relative'. The wrapper stays in the document flow but now acts as an anchor for absolutely positioned children. Next, add a new Div Block or Text element ('badge') inside the card-image-wrapper via the Navigator. Select the badge. Style Panel > Position > select 'Absolute'. Immediately, Top/Right/Bottom/Left offset inputs appear. Set Top: 12px and Right: 12px. The badge snaps to the top-right corner of the card-image-wrapper.
Expected result: A badge element sits precisely in the top-right corner of the card image, overlapping the image without affecting surrounding layout.
Set z-index to control overlapping element order
Set z-index to control overlapping element order
Z-index controls which element appears in front when elements overlap. The z-index input only appears when an element has a non-Static position. Select your badge element (set to Absolute). In Style Panel > Position, you'll see the Z-index input. Set it to 10. Now the badge will appear in front of any sibling elements with z-index less than 10. A good z-index scale to follow: page content 0–9, overlays/badges 10–99, fixed navigation 100–999, modals/drawers 1000–9999, toasts/tooltips 10000+. This prevents z-index conflicts across different component types.
Expected result: The badge element appears in front of the image. If you temporarily test with multiple overlapping elements, the one with higher z-index appears on top.
Create a Fixed navigation bar
Create a Fixed navigation bar
Fixed navigation bars stay visible as the user scrolls. Select your Navbar element. Style Panel > Position > select 'Fixed'. Immediately, offset inputs appear. Set Top: 0, Left: 0. Add Width: 100% in the Size section so the navbar spans the full viewport width. Set Z-index to 1000 so it appears above all page content. Important: Fixed elements are removed from document flow, meaning the page content behind the navbar will scroll under it — the content area's first section will be hidden behind the navbar. To fix this, add top padding to your first content section equal to the navbar height (e.g., if navbar is 80px tall, add Padding Top: 80px to the first section).
Expected result: The navbar stays at the top of the browser window as you scroll through the page content in Preview mode.
Apply Sticky positioning to a sidebar or CTA
Apply Sticky positioning to a sidebar or CTA
Sticky positioning is ideal for an in-page Table of Contents, a sidebar that follows as you read, or a 'Buy Now' CTA that sticks while the product description scrolls. Select your sidebar or CTA element. Style Panel > Position > select 'Sticky'. Set Top: 24px. This means the element will scroll normally with the page until its top edge reaches 24px from the viewport top — then it will stick there. Sticky has a crucial constraint: it only works within its parent container's bounds. Once the parent scrolls out of view, the sticky element leaves with it. This is actually useful behavior — a sidebar sticky to its content column scrolls away when the content ends.
Expected result: In Preview mode, the sidebar or CTA scrolls with the page until it reaches the sticky offset point, then remains fixed while the surrounding content continues to scroll.
Understand and debug stacking contexts
Understand and debug stacking contexts
A stacking context is a self-contained z-index layer created whenever an element has a non-Static position AND a z-index value (even z-index: 0), or certain other properties (opacity < 1, transform, filter). Elements inside a stacking context can only be ordered relative to each other — they cannot escape their parent's z-index order. This is why you may set z-index: 9999 on an element and it still appears behind something else — its parent stacking context has a lower z-index. To debug: in the Navigator (Z), identify the closest ancestor with a z-index value. That ancestor's z-index is the 'ceiling' for all of its children. To fix a z-index issue, either increase the parent's z-index or refactor the HTML structure so competing elements share a stacking context.
Expected result: You understand why z-index values are compared within stacking contexts, and you can debug z-index conflicts by tracing the ancestor stacking context hierarchy in the Navigator.
Build a layered hero section with overlapping elements
Build a layered hero section with overlapping elements
A layered hero with overlapping text, image, and decorative elements demonstrates positioning in practice. Set up the structure: create a Section element as the container with Position: Relative and a defined Height (100vh or a fixed pixel height). Inside, add a background Image set to Absolute, Top: 0, Left: 0, Width: 100%, Height: 100%, Fit: Cover, Z-index: 0. Add a semi-transparent overlay Div Block: Absolute, all offsets 0, Background Color rgba(0,0,0,0.5), Z-index: 1. Add a content Div Block with your heading and CTA button: Absolute, use the preset position center button in the Style Panel (the 9-dot grid) to center it, Z-index: 2. The text and button appear above the overlay, which appears above the background image.
Expected result: A complete layered hero with a background image, semi-transparent overlay, and centered text content stacked in the correct z-index order.
Complete working example
1POSITIONING & Z-INDEX — VISUAL STEPS SUMMARY23POSITION TYPE REFERENCE:4 Static (default) — no z-index, no offsets5 Relative — stays in flow; enables z-index + offsets; anchors Absolute children6 Absolute — out of flow; offsets relative to nearest non-Static ancestor7 Fixed — out of flow; offsets relative to viewport; stays on scroll8 Sticky — in flow until threshold (Top: 0), then fixed within parent bounds910BADGE OVERLAY PATTERN:111. Parent Div Block > Style Panel > Position > Relative122. Child badge Div > Position > Absolute > Top: 12px, Right: 12px133. Badge > Z-index: 101415FIXED NAVBAR:161. Navbar > Position > Fixed > Top: 0, Left: 0 > Width: 100% > Z-index: 1000172. First content section > Padding Top = navbar height (e.g., 80px)1819Z-INDEX SCALE (recommended):20 Page content: 0–921 Badges/overlays: 10–9922 Fixed nav: 100–99923 Modals/drawers: 1000–999924 Toasts/tooltips: 10000+2526STACKING CONTEXT RULE:27Elements can only compete in z-index with siblings in the same stacking context.28To debug: find the nearest ancestor with z-index set — that is the ceiling.Common mistakes
Why it's a problem: An Absolutely positioned element is anchoring to the wrong container — it's far away from where I expect it
How to avoid: The Absolute element is finding the wrong ancestor to anchor to. It positions itself relative to the nearest ancestor that has a non-Static position. Open the Navigator and check every parent element above the Absolute element. Set the intended parent container to Position: Relative in the Style Panel > Position section.
Why it's a problem: Z-index set to 9999 but the element still appears behind another element
How to avoid: The element is inside a stacking context with a low z-index. Z-index only compares elements within the same stacking context. Find the ancestor element that has a z-index value — that parent's z-index is compared against other stacking contexts. Increase the parent's z-index, or restructure the HTML so both competing elements are siblings in the same parent.
Why it's a problem: Sticky positioning isn't working — the element just scrolls normally without sticking
How to avoid: Three common causes: (1) The parent element has Overflow: Hidden — remove it. (2) The parent doesn't have sufficient height — Sticky needs room to stick. (3) You set Bottom: 0 or Right: 0 instead of Top: 0 — Sticky requires the Top offset to be set for vertical sticking. Check Style Panel > Position > Top value.
Why it's a problem: Fixed navbar causes the first section's content to be hidden on page load
How to avoid: Fixed elements are removed from document flow — the content scrolls under the navbar. Add Padding Top to your first content section equal to the navbar height. Style Panel > Spacing > Padding Top > enter the navbar's height value (e.g., 80px). At different breakpoints, adjust this padding if the navbar height changes.
Best practices
- Always set the parent container to Relative before adding Absolute children — if the parent is Static, your Absolute element will anchor to an unexpected ancestor.
- Use a consistent z-index scale (10, 100, 1000, 10000) across your project and document it. Arbitrary z-index values like 9999 and 99999 create unmaintainable conflicts.
- Add top padding to the first content section equal to your Fixed navbar height. Without this, content hides behind the navbar on page load.
- Check that parent elements don't have Overflow: Hidden when using Sticky positioning — overflow hidden is the most common reason sticky stops working.
- Avoid applying z-index values without a matching non-Static position — z-index has no effect on Static elements. The Z-index input only appears in Webflow's UI when position is Relative, Absolute, Fixed, or Sticky.
- Use the Navigator (Z) to verify your element nesting before applying positioning. The parent-child hierarchy is the key to understanding where Absolute elements will anchor.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm trying to create overlapping elements in Webflow — specifically a badge overlay on a card image and a fixed navigation bar. I understand I need to use position: absolute and position: fixed, but I'm getting confused about why my z-index values don't seem to work — some elements still appear behind others even when I set very high z-index numbers. Explain Webflow's positioning system, when to set parent elements to Relative, and how stacking contexts affect z-index behavior.
Add a fixed top navigation bar to this Webflow page with z-index 1000, position fixed, top 0, width 100%. Add appropriate top padding to the first section below the navbar to prevent content from hiding. Set the hero section background image to position absolute with full coverage, and layer a semi-transparent overlay above it.
Frequently asked questions
Why doesn't z-index work on my Webflow element even when I set it to 9999?
Z-index only works on elements with a non-Static position (Relative, Absolute, Fixed, or Sticky). If your element's Position is still set to Static (the default), the Z-index field may not even be visible in the Style Panel — set Position to Relative first. The second cause is stacking contexts: if the element is inside a parent that has a z-index value, the element can only compete with siblings inside that same parent, not with elements outside it.
What is the difference between Fixed and Sticky position in Webflow?
Fixed removes the element from document flow entirely and positions it relative to the viewport — it stays in place as you scroll regardless of where it is in the page structure. Sticky keeps the element in document flow (taking up space in the layout) and behaves like Static positioning until the element reaches the defined Top offset, then temporarily 'sticks' to that position. Sticky is bounded by its parent container's height — when the parent scrolls out of view, the sticky element leaves too.
Can I use Absolute positioning without setting Relative on the parent in Webflow?
You can, but the Absolute element will anchor to the nearest ancestor that already has a non-Static position. If no ancestor has positioning set, the element anchors to the HTML document's initial containing block — effectively the top-left of the entire page. This is almost never what you want. Always set the intended parent to Relative so Absolute children anchor correctly to their direct container.
How do I make an element appear behind a semi-transparent overlay but in front of a background image?
You need three distinct z-index layers on three sibling elements, all inside a Relative parent. Background image: Position Absolute, Z-index 0. Overlay: Position Absolute, Z-index 1, semi-transparent Background Color (rgba). Content element: Position Absolute, Z-index 2. Since all three share the same Relative parent, their z-index values compare directly and stack in the correct order.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation