In this lesson:
- Static positioning
- Relative positioning
- Absolute positioning
- Fixed positioning
- Sticky positioning
- Position controls and values
- Float settings
- Clear settings
The position property determines an element’s position on the page. Once you set an element's position, you can make adjust to the top, bottom, left, and right properties.
Every element has a static position by default, so the element will stick to the document flow. Elements with static positioning appear in the order they’re stacked. Without styling added, they won't overlap and different elements won't have different default values. The only reason to set an element to static is to remove positioning applied to it.
An element set to relative is positioned relative to its normal position. A relative setting without other positioning attributes added (top, left, bottom, or right), will not be affected. This is because it’s relative to itself exactly as if you left it as static. Setting the top, right, bottom, and left properties of a relative element will move it away from its normal position. Other content won't adjust to fit into any gap left by the element.
An element with relative positioning can overlap other elements without affecting their position or interrupting the normal document flow.
Two other things happen when you use relative position on an element:
- It introduces the use of z-index on that element. This doesn’t work with static elements. Even if you don’t set a z-index value, this element will still appear on top of any other static element it overlaps. Z-index is available for any element not set to static.
- It limits absolutely positioned child elements. Any element that is a child of a relative element, or any position other than static, can be absolutely positioned within that element.
Learn more about applying a z-index value.
To remove an element from the normal document flow, absolute position is a great option. The position of an absolute element isn’t affected by other elements and doesn’t affect the position of other elements.
By default, the position of the element is relative to the body element, but you can position any absolute element inside an element if that parent is set to anything but static.
Use the positioning attributes top, left, bottom, and right to set the location — these values will be relative to the next parent element with settings other than static.
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 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 stop scrolling.
You must specify at least one position value for the top, bottom, left, or right side for sticky positioning to work. 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 don’t 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
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.
Remember, 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, change the position of that ancestor to anything but static.
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 left within the parent element. This setting will also stack any element to the right or below, directly next to the element unless it has 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 floating 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 floating element, but cannot be applied to the floating element itself.
An element that has the clear property set on it will not move up adjacent to the float like the float desires, but will move itself down past the float
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 floating to the left.
Clear right prevents an element from wrapping around an element floating to the right.
Clear both prevents an element from wrapping around any floating element, regardless of whether it’s floating to the left or right.