Oops! Something went wrong while submitting the form
Position, floats and clear settings
The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
The position settings in the Style panel allow you to set the relative positioning of elements, the float settings, and the clear settings.
The position property specifies what type of positioning method is used to determine an element’s position on the page. Once you set the position property of an element, you can adjust the positioning by setting the top, bottom, left, and right properties.
There are five different position values: static, relative, absolute, fixed, or sticky.
Static is the default position allowing the element to display as defined under the layout settings. Elements with static positioning will appear in the order they are stacked relative to other elements, without overlapping. This is referred to as the "normal document flow."
When you set the position value of an element to relative and use the settings to reposition the element, the position will be relative to its normal position.
An element with relative positioning can overlap other elements without affecting their position or interrupting the normal document flow.
When you set the position value of an element to absolute, that element will be removed from the document flow.
By default, the element will be positioned relative to the body element. However, you can set any parent element to position relative so that the absolute-positioned element will be positioned relative to that parent element.
Absolute-positioned elements are positioned relative to the first parent that has either position relative, absolute or fixed enabled.
Fixed elements are positioned relative to the viewport or the browser window.
When you scroll down the page, fixed elements stay fixed in their positions. This is position setting is often used for fixed navigations.
Sticky elements will alternate between relative and fixed positioning based on the viewer’s scroll position.
A sticky element is relative to the document flow until a defined scroll position is reached. At that point, it switches to the behavior of a fixed element within its direct parent. Once the sticky element hits the bottom of its parent, it will not continue to scroll.
You must specify at least one position value for the top, bottom, left, or right side for sticky positioning to work. Also, position sticky may not work correctly if any parent element has a set height or overflow set to hidden, scroll, or auto.
For relative, absolute, fixed, and sticky position properties, you have the following controls in the Style panel:
Z-index value field
For elements with absolute and fixed positions, you’ll see presets that allow you to position the element relative to the element indicated in the relativity indicator.
You can choose any of the following preset positions:
Top left: sets the following values: top: 0px - left: 0px
Top right: sets the following values: top: 0px - right: 0px
Bottom left: sets the following values: bottom: 0px - left: 0px
Bottom right: sets the following values: bottom: 0px - right: 0px
Left: sets the following values: top: 0px - left: 0px - bottom: 0px
Right: sets the following values: top: 0px - right: 0px - bottom: 0px
Top: sets the following values: top: 0px - left: 0px - right: 0px
Bottom: sets the following values: bottom: 0px - left: 0px - right: 0px
Full: sets the following values: top:0px - bottom: 0px - left: 0px - right: 0px (covers the entire relative parent or body)
The manual controls allow you to override the presets or default to the auto value for the top, bottom, left, and right side. You can change the value for each side either by dragging the control or clicking it and choosing a preset value or entering a custom value.
Top: increase it to push the element down from the top
Left: increase it to push the element off from the left and move it to the right
Right: increase it to push the element off from the right and move it to the left
Bottom: increase it to push the element up from the bottom
Adding negative values for any of these will move it in the opposite direction and may push it out of the border of the parent element.
The relativity indicator shows you which element your selected element is positioned relative to.
An element set to relative positioning is positioned relative to itself.
An element set to absolute element is positioned relative to a parent element. By default, this might be the body element. If you want to absolutely position an element within a specific parent or ancestor, changed the position of that ancestor to relative.
A fixed element is positioned relative to the page body and remains in place even when the page is scrolled
A sticky element is positioned relative to its direct parent element. In some cases, this will be the page body.
The Z-index is an element’s position on the imaginary z-axis extending into and out of your computer screen. By default, elements have an auto z-index and elements at the bottom of the page stack above elements above them, while elements on the right stack above elements to the left. Static elements always stack lower than positioned elements with a position set to relative, absolute, fixed, or sticky.
Positioned elements may overlap other elements in the natural document flow, therefore you can alter the Z-index value of any positioned element to change its default stacking order. Higher values stack on top of lower values. Z-index values can be any integer from 0 to 2147483647. You can also use negative values, but you may lose element visibility as your element will get rendered underneath most elements.
Z-index on nested elements
When the z-index is set to auto, the stack order of the element is equal to its parent’s stack order. These elements can be stacked relative to the parent element but remain within the parent element’s z-axis relative to other elements. For example, if element A has a higher z-index than an element B, a child element of element B can never be higher than element A no matter how high the z-index value of element B is.
To wrap text around an element, float the element to the left or right. To float an element, enable float left or float right properties in the Style Panel.
You can float an element to the left or right, or none which will keep it in its natural position in the page flow.
Floating multiple elements will stack them side by side. This layout technique is used in many native Webflow components such as columns, Collection lists, and nav links. You can also accomplish these layout tasks with flexbox.
None is the default setting for most elements and will position the element in the normal document flow. If an element has an inherited float setting, for example from a larger breakpoint, you can restore its natural position on the page by setting the float to none.
Floating an element to the left will position it to the left within the parent element. This setting will also stack any element to the right or below directly next to the element unless they have a clear setting applied.
Floating an element to the right will position it to the right within the parent element. Any long paragraph or rich text directly below the floated element will wrap around that element unless they have a clear property set.
Setting clear on an element will ensure that it will not wrap around a floating element. This setting can be applied on any element stacked below the floated element, but cannot be applied to the floated element itself.
Clear none is the default setting for most elements. Elements set to clear non will stack next to or wrap around any floating element directly above it in the document flow.
If an element has an inherited clear setting, for example from a larger breakpoint, you can clear any clear setting by setting the clear to none.
Clear left prevents an element from wrapping around an element floated to the left.
Clear right prevents an element from wrapping around an element floated to the right.
Clear both prevents an element from wrapping around any floated element, regardless of whether it’s floated to the left or right.
Can I Use ?
Data on support for the feature across the major browsers from caniuse.com.