Position, floats and clear settings

Customize the position of your elements relative to themselves, to parent or sibling elements, or to the viewport.

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.

Position properties

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

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."

Relative

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.

Absolute

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

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

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.

There are certain browsers that do not support sticky positioning. Check out which browsers support position:sticky.

Position controls and values

For relative, absolute, fixed, and sticky position properties, you have the following controls in the Style panel:

  • Positioning controls
  • Relativity indicator
  • Z-index value field

Positioning controls

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.

Relativity indicator

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.

Z-index

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 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.

The z-index can be adjusted to change the default stacking order of the element in Webflow.
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.

Float

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.

Float none

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.

Float left

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.

Float right

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.

Clear

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

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

Clear left prevents an element from wrapping around an element floated to the left.

Right

Clear right prevents an element from wrapping around an element floated to the right.

Both

Clear both prevents an element from wrapping around any floated element, regardless of whether it’s floated to the left or right.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.