How do I position an element in Webflow?
Set a Webflow element to static, relative, absolute, fixed, or sticky, then check which parent that position uses.
Select the element and open Style panel, Position. Static keeps it in normal flow. Relative moves it and still reserves its place. Absolute removes it from the flow and places it against the nearest parent that is not static. Fixed uses the browser window. Sticky stays in the flow until you scroll, then holds inside its parent, and it needs one side set.
Leave it static until it should move
Every element starts on static. Static keeps the element in the document flow, in the order it is stacked. Without another position, those elements do not overlap because of position, and they do not each invent a different default.
The useful reason to choose static again is to remove a position you already set. If a badge was absolute and should return to the row, set it back to static. It rejoins the flow.
Centering a box in its parent is a different control. Flex on the parent, or auto margins, does that job. The center guide is that placement. This page is only the position property.
Shift it with relative
Relative measures the element from its normal spot. If you do not set top, right, bottom, or left, it looks the same as static, because it is still sitting on itself.
Set one of those sides and the element moves off its spot. The other content does not slide into the gap. The element can overlap its neighbors without pushing them.
Two more things happen. Z-index starts to apply, which it does not do on a static element. And any absolute child is limited to this element: a child can be placed inside a parent that is relative, or any position other than static.
Example: a sale label should sit on the photo inside a card, and the card itself should stay in the row. Set the card to relative and leave its sides alone. The card does not jump. The label, set to absolute in the next section, now has a parent to sit inside.
Pin it inside a parent with absolute
Absolute takes the element out of the flow. Neighbors do not move it, and it does not move them. By default it is measured from the body. It is measured from a parent instead when that parent, or another ancestor, is anything but static.
Top, right, bottom, and left set the spot. On absolute and fixed, presets do this for you. Top right sets top to 0 and right to 0. Top left, bottom left, and bottom right are the other corners. Left, right, top, and bottom stretch along that edge. Full sets all four sides to 0 so the element covers the relative parent, or the body.
You can drag a side or type a value. A larger top pushes the element down. A larger left pushes it right. A larger right pushes it left. A larger bottom pushes it up. A negative value moves the opposite way and can leave the parent.
Example: the card is already relative. Select the label, set position to absolute, and choose the top right preset. The label sits in the card's corner. Add 12px of top and 12px of right if it should sit inset from that corner. If the label is stuck to the page corner instead, the card is still static. Set the card first, then the label.
Hold it with fixed or sticky
Fixed measures the element from the browser window. It stays there while the page scrolls. Webflow documents this for fixed navigation. Because it leaves the flow immediately, it can cover the top of the hero as soon as the page loads.
Sticky switches. It stays in the flow until the scroll reaches the side you set, then it behaves like a fixed element inside its direct parent. When the scroll hits the bottom of that parent, the element stops and moves off with the parent. You must set at least one of top, bottom, left, or right, or sticky does not hold. It can also fail when any parent has a set height, or overflow set to hidden, scroll, or auto.
The relativity indicator in the Position controls names the element you are measured against. Relative means itself. Absolute means a parent, and that parent may be the body until you change an ancestor. Fixed means the page body, and it remains while you scroll. Sticky means the direct parent.
A navbar that should stay available down the page is a specific pattern. The sticky navbar guide is that bar, including the parent and the top value. Use this page to choose the position. Use that guide when the element is the navbar.
Stack it only after it is positioned
Z-index is available on any element that is not static. Static elements stack lower than elements set to relative, absolute, fixed, or sticky. A higher number paints above a lower number. Auto follows the parent. A child cannot paint above an element that already sits above its parent, no matter how large the child's number is.
The z-index guide is the number and the parent limit. Set the position on this page first. A number on a static label does nothing.
Position is a style, so a class shares it. An absolute label class puts every element with that class in the corner of its own non-static parent. Use a separate class when only one label should leave the flow.
Publish and scroll. The absolute label should stay in the card. A fixed bar should stay on the window. A sticky bar should hold, then release at the end of its parent. If the badge is on the page corner, the parent is still static. If sticky never holds, a side is empty, or a parent has a height or an overflow that blocks it.
A position change on a site you already have 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.
Questions & answers
I set absolute and the badge jumped to the corner of the page. Why?
The nearest parent is still static, so the badge is measured from the body. Set that card, or another ancestor, to relative, absolute, fixed, or sticky, then set the badge again.
Relative did not move the card. What is missing?
Relative with no top, right, bottom, or left looks the same as static. Set one of those sides if the card itself should shift. The gap it leaves is not filled by the next element.
How is fixed different from a sticky navbar?
Fixed is out of the flow and stays on the window from the start, so it can cover the hero. Sticky stays in the flow until you scroll, then holds only inside its parent. The navbar guide is that pattern.
The label covers the heading. What decides which one is in front?
Z-index applies only after position is not static. A higher number stacks above a lower one, and a child cannot climb out of a parent that sits lower. The z-index guide is that stack.
Sources & further reading
Need a hand with your Webflow site?
View membership