Positioning and Overflow
|
This content was generated with the assistance of AI and should be verified against the official Webflow documentation before being relied on in production. This sub-section’s Webflow bibliography lists the reference material consulted while preparing these pages. |
This page was written against the Webflow Designer as it was on 2026-10-28. Webflow is a hosted service without version numbers, so the position and overflow controls can move or be renamed between two visits; https://webflow.com/updates is where changes are announced. Positioning and overflow are part of the Designer on every plan, including the free Starter Site plan, so every recipe on this page can be built and published for testing without paying. The examples run on a Developer workspace site and use the fictitious Fernbrook Gardens botanical garden.
Most of a Webflow page is laid out with Flexbox and Grid (see Flexbox and Grid Layouts). Positioning is the tool for the exceptions: a badge pinned to the corner of a card, a hero image with text laid over it, a navigation bar that stays at the top of the viewport, a sidebar that follows the reader, a decorative shape that sticks out of its section. Overflow decides what happens when a child is larger than its parent: it can spill out, be clipped or scroll. The two topics belong together because the most common positioning bug is an overflow setting on an ancestor.
The CSS behind this page is explained in the generic guide CSS Positioning; this page concentrates on how Webflow exposes it and on the recipes that matter in a visual tool.
Where the controls live
In the Style panel the Position section holds the position type, the offsets, the stacking order (z-index) and, on older projects, Float and Clear. The Layout section holds Display and the Overflow setting. As with every Style panel control, the values are written to the selected class at the selected breakpoint and state, so position can differ per breakpoint (a fixed header on desktop that becomes static on mobile). The box model and the meaning of the coloured labels are described in Style Panel and Box Model.
| Control | CSS written | Notes |
|---|---|---|
Position: Static |
|
The default. Offsets and z-index are inactive |
Position: Relative |
|
Stays in flow; offsets nudge it; becomes an anchor for absolute children |
Position: Absolute |
|
Leaves the flow; placed against the nearest positioned ancestor |
Position: Fixed |
|
Leaves the flow; placed against the viewport |
Position: Sticky |
|
In flow until a scroll threshold, then pinned |
Offsets (top, right, bottom, left) |
|
Appear for every type except Static; units are px, %, rem, em, vw, vh and |
Z-index |
|
Only effective on positioned elements (and on flex and grid items) |
Overflow |
|
Visible, Hidden, Scroll or Auto, set on the parent whose content may exceed it |
For relative, absolute, fixed and sticky elements the panel also draws a small box with the four offsets around it, and a visual indicator of what the element is positioned relative to. Clicking an edge of that box pins the element to that side and sets the matching offset. This is a faster way to set top: 0; left: 0 than typing, but the generated declarations are plain CSS and can be read in the panel as ordinary fields.
Normal flow and the five position values
In the normal flow, block elements stack vertically and inline elements run horizontally, and each element occupies space that its siblings respect. A position value other than static changes one of two things: whether the element still occupies space in the flow, and which box its offsets are measured from.
| Value | Takes space in flow | Offsets measured from | Typical use |
|---|---|---|---|
|
yes |
not applicable |
Almost everything |
|
yes (its original slot is kept) |
its own normal position |
Anchor for absolute children, small nudges |
|
no |
nearest positioned ancestor, else the initial containing block |
Badges, overlays, decorations |
|
no |
the viewport |
Sticky headers, floating buttons, cookie bars |
|
yes |
the nearest scrolling ancestor |
Table of contents, section headings that stay in view |
Static
Static is what an element has until something changes it. In Webflow, nearly every element on a finished site is static and arranged by Flexbox or Grid. Reaching for positioning to solve a layout problem that Flexbox can solve is the most common mistake of people coming from tools with a free-form canvas: positioned elements do not push their neighbours, so the page stops being responsive to content length.
Relative
A relative element stays in the flow and keeps its slot, but its offsets shift it visually from where it would have been. The shift does not move other elements. The more important role in practice is to be the anchor for absolutely positioned children. Setting position: relative with no offsets does not change the look of the element at all and costs nothing.
.card-plant {
position: relative; /* anchor for the badge below */
}Absolute
An absolute element is removed from the flow, so its parent behaves as if the element were not there, and it is placed with its offsets inside the containing block: the padding box of the nearest ancestor whose position is not static. If no ancestor is positioned, the reference is the initial containing block, which is why a badge that was meant to sit in a card jumps to the corner of the page when the card has not been made relative. The Designer helps by showing, in the position box, the element the offsets refer to; when that is not the intended parent, set the parent to Relative.
An absolute element with no offsets stays where it would have been in the flow but no longer reserves space. An absolute element with both left and right (or top and bottom) set and no explicit width (height) stretches between them, which is how an overlay that covers its parent is built (see the recipes).
/* Fernbrook plant card: "New arrival" badge in the top-right corner */
.card-plant {
position: relative;
}
.badge-new {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
}Fixed
A fixed element is placed against the viewport and does not move when the page scrolls. It is removed from the flow, so the content under it needs top padding (or a spacer) equal to the fixed element’s height, otherwise the first lines of the page are hidden behind it. Webflow’s own Navbar element can be made fixed, and a common pattern is a transparent fixed navbar over a hero.
Three behaviours deserve attention.
-
Ancestor transforms break fixed. If any ancestor has a
transform,filterorperspectivevalue other than none, a fixed descendant is placed against that ancestor instead of the viewport. This happens in Webflow when an interaction animates a parent with a transform, and the symptom is a "fixed" button that scrolls away or jumps. -
Mobile browsers. On phones the viewport changes height as the address bar shows and hides, so a bottom-fixed bar can move slightly; use
dvh-based sizes only when the effect matters, and test on a real device. -
The Designer canvas. The canvas scrolls inside the Designer, and a fixed element is shown against the canvas frame. Check the real behaviour in Preview mode or on the published page.
.navbar-fernbrook {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
/* The first section makes room for the navbar */
.section-hero {
padding-top: 72px;
}Sticky
A sticky element is positioned in the flow like a relative one until the scroll position reaches its threshold, and then it holds that offset inside the scrolling container until its parent ends. Sticky needs at least one offset (usually top) to know when to stick, and it is the right choice for a table of contents, a filter column beside a Collection list, or a section heading that stays visible.
Sticky fails silently in a few well-known cases, and the Webflow help article lists the main ones.
-
No offset set. Without
top,bottom,leftorright, sticky behaves as relative. -
An ancestor with overflow hidden, scroll or auto. The sticky element then sticks relative to that ancestor’s scroll box, which usually does not scroll, so it never sticks. This is the single most frequent cause of "sticky does not work", and a very common one in Webflow because section wrappers often use overflow hidden to clip decorations (see the overflow section).
-
A parent with no spare room. A sticky element only travels within its parent. If the parent is exactly as tall as the sticky element, there is nothing to travel. In a Flexbox row the sticky column also needs
align-self: flex-start(Align: Start in the panel), because the default stretch makes the column as tall as its parent. -
Parent height set. A fixed height on the parent limits the travel in the same way.
/* Two-column guide page: the table of contents follows the reader */
.guide-layout {
display: flex;
align-items: flex-start; /* the sticky column must not stretch */
gap: 48px;
}
.guide-toc {
position: sticky;
top: 96px; /* below the fixed navbar */
}Choosing a position type
The chart is a rule of thumb, not a Webflow feature. The choice that costs least later is always the one that keeps content in the flow.
Z-index and stacking contexts
When positioned elements overlap, the browser paints them in a stacking order. Without z-index, positioned elements are painted after non-positioned ones, and among themselves in document order, so a later sibling covers an earlier one. The z-index field changes that order within a stacking context.
A stacking context is a self-contained layer group. Inside it, children are ordered by their z-index; the whole context is then ordered against its siblings as a single unit. Contexts are created by more than a positioned element with a z-index:
-
the root of the page;
-
a positioned element (relative, absolute, fixed or sticky) with a z-index other than
auto; fixed and sticky elements create a context even withauto; -
a flex or grid item with a z-index other than
auto, even when static; -
an element with
opacitybelow 1, atransform, afilter, abackdrop-filter,mix-blend-modeother than normal, orisolation: isolate.
The last group explains the classic bug: a dropdown with z-index: 9999 still appears under a neighbouring card, because the dropdown’s ancestor created a context (a hover effect added a transform to the card’s column, for instance) and the whole ancestor ranks lower than the neighbour. Raising the number never helps across contexts; the ancestor’s order is what counts.
A z-index scale
Numbers sprinkled through a site become a maintenance problem. The common advice (including the Webflow Way guidance on consistent systems) is to treat z-index like any other design token: decide a short scale and reuse it. The scale can be stored as number variables (see Variables and Modes) and applied from the field’s variable picker, so a change is made in one place.
| Variable (Number) | Value | Used for |
|---|---|---|
|
0 |
Normal content and the default of positioned items |
|
2 |
Badges and overlays inside cards |
|
10 |
Sticky columns |
|
100 |
Fixed navbar |
|
1000 |
Modals, lightboxes and the cookie bar |
:root {
--z-base: 0;
--z-raised: 2;
--z-sticky: 10;
--z-nav: 100;
--z-overlay: 1000;
}
.navbar-fernbrook {
position: fixed;
z-index: var(--z-nav);
}Source: Webflow Help Center: Variables
Webflow’s own components use z-index: the Navbar menu, Dropdown lists and Lightbox have built-in values, and the Lightbox and the mobile menu overlay sit above ordinary content. A custom scale therefore keeps the nav and overlay values high enough to stay above them, and any custom element that must cover Webflow’s own should be tested in Preview mode.
Overflow
Overflow describes what happens when content is larger than the box that holds it. The setting is applied to the container, not to the overflowing child.
| Setting | Effect |
|---|---|
Visible (default) |
Content spills outside the box and is painted over what is next to it |
Hidden |
Content outside the box is clipped and cannot be reached by scrolling |
Scroll |
The box always shows scrollbars, and content scrolls inside it |
Auto |
Scrollbars appear only when the content does not fit |
Three consequences matter in Webflow.
-
Hidden creates a block formatting context and a clip. It clips absolutely positioned decorations, shadows, focus outlines and dropdowns that extend past the edge. A dropdown menu inside a container with overflow hidden is cut off, so the container should be visible or the menu should live outside it.
-
Hidden, scroll and auto stop sticky. As the sticky section explained, any of the three on an ancestor makes sticky stick to that ancestor’s scroll box.
-
Horizontal scroll on the whole page is usually caused by a child wider than the viewport: a 100vw element in a page that has a vertical scrollbar (100vw includes the scrollbar), a negative margin, or a decoration pushed out with an absolute offset. Putting overflow hidden on the Body or on the offending section is a quick cure but breaks sticky and clips shadows, so first find the child. The Navigator shows which elements are wider than the body, and Preview at the Mobile portrait breakpoint reveals the culprit by the sideways scroll.
Overflow for a purpose: scrolling regions and clipping
Overflow auto is the right tool for a horizontally scrolling row of cards on mobile, or a fixed-height list that scrolls inside a panel.
/* Mobile: the Fernbrook events strip scrolls sideways instead of wrapping */
@media screen and (max-width: 767px) {
.events-strip {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 16px;
scroll-snap-type: x mandatory;
}
.events-strip > .event-card {
flex: 0 0 80%;
scroll-snap-align: start;
}
}The Style panel offers the single Overflow control; the axis-specific properties (overflow-x, overflow-y) and scroll-snap-* are available through the custom properties section of the Style panel (see Custom Attributes and JavaScript for what to do when a property has no control). The child selector in the example is shown for the CSS reader; in the Designer the same result comes from a class on the strip and a class on each card.
Rounded corners and image crops
An image or video inside a card with rounded corners does not follow the radius unless the card clips it. The cure is overflow hidden on the card, together with the border radius, and that is also the correct way to crop a zoom-on-hover effect: the image scales inside a card whose overflow is hidden, so the enlarged image never leaves the card. Backgrounds, borders and radius are covered in Backgrounds, Borders and Effects.
.card-plant {
border-radius: 16px;
overflow: hidden; /* clips the image to the rounded corners */
}
.card-plant img {
transition: transform 300ms ease;
}
.card-plant:hover img {
transform: scale(1.06);
}Full-bleed patterns
A full-bleed element extends to the edges of the viewport even when its content is held in a centred column of limited width. The structure that Webflow encourages makes this simple: the Section is full width and carries the background; the Container inside it limits the content width.
<section class="section-hero">
<div class="container">
<h1 class="heading-hero">Walk the Fernbrook seasons</h1>
</div>
</section>.section-hero {
background-image: url("hero.jpg"); /* uploaded in the Assets panel */
background-size: cover;
background-position: 50% 50%;
min-height: 80vh;
display: flex;
align-items: center;
}
.container {
width: 100%;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}When one element must break out of a centred column (a full-width image inside an article), there are three approaches in order of preference.
-
Restructure. Put the full-bleed element in its own Section outside the Container. This needs no tricks and works with every breakpoint.
-
Grid. Make the article a grid with a wide centre column and let the full-bleed item span all columns (see Flexbox and Grid Layouts). Also useful inside Rich Text, where the item can be a component.
-
Negative margins with
100vw.width: 100vw; margin-left: calc(50% - 50vw);works but causes horizontal scroll when the page has a vertical scrollbar, because100vwincludes it, which is why the page may needoverflow-x: clipon the Section. Use it only when the first two are impossible.
Recipes rebuilt for the current Designer
The overlay and overlap recipes of older Webflow tutorials still describe the right CSS; what changed is where the controls are and the tools around them. Each recipe is built on the Fernbrook Gardens site.
Text over an image
The hero above can use a background image on the Section, which is the simplest form. When the image must be an img element (for alt text, srcset and lazy loading, covered in Images and Assets), stack the text over it with a relative wrapper and an absolute image.
-
Add a Div Block with the class
hero-wrap; set Position to Relative, a minimum height (for example70vh) and Overflow to Hidden. -
Add an Image inside it with the class
hero-image; set Position to Absolute, all four offsets to 0, Width and Height to 100%, and Object fit to Cover. -
Add the content Div Block
hero-contentafter the image; set Position to Relative and Z-index to 2, so it paints above the image.
<div class="hero-wrap">
<img class="hero-image" src="hero.jpg" alt="Rhododendrons in bloom at Fernbrook Gardens" loading="eager">
<div class="hero-content">
<h1>Walk the Fernbrook seasons</h1>
</div>
</div>.hero-wrap {
position: relative;
min-height: 70vh;
overflow: hidden;
}
.hero-image {
position: absolute;
inset: 0; /* written by Webflow as top, right, bottom and left set to 0 */
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-content {
position: relative;
z-index: 2;
}An image that conveys information needs a real alt text; a purely decorative one should have an empty alt (the Assets panel and the Image settings explain both). Source: Webflow Help Center: CSS position properties
A gradient overlay for legible text
A photograph rarely has enough contrast for white text. An overlay is an absolute element between the image and the text.
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1; /* above the image (auto), below the content (2) */
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 100%);
pointer-events: none; /* clicks reach the content */
}The pointer-events property is set through the custom properties section when no control exists; it matters because a covering overlay would otherwise swallow clicks meant for links beneath it. Check the text with the contrast guidance of Accessibility.
A badge on a card, and a stretched link
A badge is the card example above. A stretched link makes the entire card clickable while keeping a single real link in the markup: the link’s pseudo-element covers the card.
.card-plant {
position: relative;
}
.card-plant__link::after {
content: "";
position: absolute;
inset: 0;
}Webflow’s Link Block can also wrap the whole card, which is simpler when no other link or button is inside it, because a link inside a link is invalid HTML. Pseudo-elements cannot be created in the Designer, so the stretched link needs a Code Embed with a style tag (see Custom Code in the Head, Footer and Embeds).
A sticky header that hides on scroll
Fixing the header is enough for most sites. The "hide on scroll down, show on scroll up" behaviour is an interaction, not a position: the header stays fixed and an Interactions with GSAP timeline moves it out of view. See Scroll and Page Animations. Older tutorials built the same effect with Classic Interactions; the concept is the same and the recipe is simpler now.
Responsive positioning
Positions are properties like any other, so a breakpoint can override them. Two habits keep the result robust.
-
Prefer relative units and edge offsets over magic numbers. A badge at
top: 12px; right: 12pxadapts to the card size; one atleft: 183pxdoes not. -
Reset what does not make sense on small screens. A sticky column on Tablet and below usually has no room to stick, and a fixed sidebar can cover the content. Set the Tablet breakpoint to Position: Static for the sticky column, and the layout falls back to a simple stack. See Responsive Design and Breakpoints.
@media screen and (max-width: 991px) {
.guide-toc {
position: static;
}
}Common mistakes and pitfalls
-
Absolute without a relative parent. The element jumps to the page corner. Make the intended parent Relative.
-
Absolute used for layout. An absolutely positioned element does not push its neighbours, so a longer translation or a bigger font overlaps the text next to it. Use Flexbox or Grid for anything that carries content.
-
Giant z-index numbers. They hide a stacking context problem and need a larger number every month. Find the context, or use a small scale as above.
-
Overflow hidden on the Body or on every Section. It clips shadows and dropdowns and stops sticky; apply it on the narrowest element that needs it.
-
Fixed elements without room reserved. The page content starts under the fixed bar.
-
Forgotten overlay clicks. A covering absolute element blocks clicks unless it has
pointer-events: none. -
Judging on the canvas only. Fixed, sticky and viewport-height behaviour is correct only in Preview mode and on the published site.
-
Tapping targets. Fixed buttons near the screen edge on a phone can collide with the browser’s own gestures; keep 16 to 24 px of margin.
Corrections to older tutorials
Ali Rushdan Tariq’s Webflow by Example (Packt, 2021) builds overlay and overlap effects with the position controls of its time. The CSS ideas it teaches (a relative parent, an absolute child, a z-index to bring an item forward) are still valid. The click paths are different today: the Style panel has been redesigned, "Symbols" are now Components, and projects are called sites. Variables now carry values such as a z-index scale, and the hero image should use the image conversion and responsive images described in the images page rather than a single large file.