CSS positioning attributes

Exploring the following topics:

1. Place regulation
2. Corresponding positioning
3. Exact positioning
4. Unchanging positioning
5. Attached positioning
6. Control over positions and attributes
7. Floating setups
8. Clarification settings

The location attribute decides an element’s placement on the page. Once you establish an element’s position, you can tweak the top, bottom, left, and right attributes.

Place regulation

Every element has a fixed placement by default, so the element will hold onto the document flow. Elements with fixed positioning display in the sequence they’re stacked. Without added styling, they won’t overlap, and various elements won’t possess different default principles. The sole motive to define an element as fixed is to eliminate the applied positioning.

Corresponding positioning

An element configured as corresponding is placed in relation to its typical position. A corresponding setting without additional placement attributes included (top, left, bottom, or right) won’t be altered. This is because it’s in relation to itself precisely as if you maintained it as fixed. Defining the top, right, bottom, and left properties of a corresponding element will shift it from its ordinary position. Different content won’t adapt to fit inside any gap left by the element.

An element with corresponding positioning can overlap other elements without impacting their placement or obstructing the standard document flow.

A couple of other things transpire when you employ corresponding location on an element:

1. It initiates the utilization of z-axis on that element. This doesn’t function with fixed elements. Even if you don’t establish a z-axis value, this element will still emerge above any other fixed element it intervenes with. The z-axis is accessible for any element not designated as fixed. 
2. It confines utterly positioned child elements. Any element that functions as a child of a corresponding element, or any placement distinct from fixed, can be precisely positioned within that element. 

Expand your understanding about applying a z-axis value.

Exact positioning

To displace an element from the standard document flow, exact placement is a terrific choice. The position of an exact element isn’t influenced by other elements and doesn’t impact the placement of other elements. 

By default, the placement of the element is in relation to the body element, but you can position any exact element inside an element if that parent is designated as anything aside from fixed.

Leverage the placement attributes top, left, bottom, and right to establish the position — these values will be with respect to the nearest parent element with configurations differing from fixed.

Unchanging positioning

Unchanging elements are placed in relation to the viewport or the browser window.

During page scrolling, unchanging elements remain fixed in their positions. This positioning choice is frequently utilized for stable navigations.

Attached positioning

Attached elements will interchange between corresponding and unchanging positioning based on the viewer’s scrolling position.

An attached element is in relation to the document flow until a defined scroll level is reached. At that moment, it switches to the behavior of an unchanging element within its immediate parent. Once the attached element reaches the base of its parent, it will cease scrolling.

You need to specify at least one placement value for the top, bottom, left, or right side for attached positioning to function. Location attached might not function accurately if any parent element has an established height or overflow designated as hidden, scroll, or auto.

There are some browsers that don’t endorse attached positioning. Check which browsers endorse position attached.

Placement controls and values

For corresponding, exact, unchanging, and attached placement attributes, you have the following controls in the Style panel:

• Placement controls
• Correlativity indicator
• Z-axis value field

Placement controls

For elements with exact and unchanging positions, you’ll encounter presets enabling you to position the element in relation to the element indicated in the correlativity indicator.

You can select any of the subsequent preset positions:

• Top left: specifies the values as follows: top: 0px and left: 0px
• Top right: indicates the values as follows: top: 0px and right: 0px
• Bottom left: establishes the values as bottom: 0px and left: 0px
• Bottom right: configures the values as bottom: 0px and right: 0px
• Left: assigns values like top: 0px, left: 0px, and bottom: 0px
• Right: allocates values like top: 0px, right: 0px, and bottom: 0px
• Top: sets values like top: 0px, left: 0px, and right: 0px
• Bottom: defines values as bottom: 0px, left: 0px, and right: 0px
• Full: specifies values like top: 0px, bottom: 0px, left: 0px, and right: 0px (covering the entire relative parent or body)

The manual controls allow you to alter the presets or switch to the auto value for each side such as top, bottom, left, and right. You can adjust the value for each side either by manipulating the control or tapping it to pick a preset value or enter a custom value.

• Top: increasing it pushes the element downward from the top
• Left: increasing it moves the element off from the left towards the right
• Right: increasing it moves the element off from the right towards the left
• Bottom: increasing it moves the element upwards from the bottom

Utilizing negative values for any of these might move it in the opposite direction and potentially shift it beyond the parent element’s border.

Positioning Indicator

The positioning indicator reveals which element your selected item is positioned in relation to.

Remember, an element set to relative positioning is positioned relative to itself.

An element set to absolute is positioned relative to a parent element. By default, this may be the body element. If you want to absolutely position an element within a specific parent, modify the position of that predecessor to anything other than static.

A fixed element is positioned relative to the page body and remains fixed even when scrolling through the page

A sticky element is positioned relative to its immediate parent element. Sometimes, this will be the page body.

Layer Index

The layer index represents an element’s position on the theoretical z-axis extending into and out of your computer screen. Initially, elements possess an auto layer index, and elements at the bottom of the page will stack above those above them, while elements on the right will stack above those on the left. Static elements consistently stack beneath positioned elements with a position of relative, absolute, fixed, or sticky set.

Positioned elements might overlap other elements in the natural document flow, hence you can adjust the layer index value of any positioned element to modify its default stacking order. Higher values stack over lower values. Layer index values can range from 0 to 2147483647. Negative values are permissible, but using them may result in compromised element visibility as your element could render beneath most other elements.

Layer Index on Nested Elements

When the layer index is set to auto, the arrangement order of the element aligns with its parent’s arrangement order. These elements can be stacked in relation to the parent element but will remain within the parent element’s z-axis concerning other elements. For instance, if element A holds a higher layer index than element B, a child of element B can never surpass element A regardless of how high the layer index value of element B is.

Floating Configurations

To permit text to wrap around an element, float the element to the left or right. To achieve this, activate the float left or float right properties in the Style panel.

You may float an element to the left or right, or none, which maintains its default position in the page’s flow.

Floating multiple elements will arrange them side by side. This layout method is utilized in various native Webflow elements like Collection lists and navigation links. Alternatively, you can achieve these layout tasks with flexbox.

Float None

None serves as the standard setting for most elements and positions the element in the regular document flow. If an element inherits a float setting, such as 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 aligns it to the left within the parent element. This also aligns any element to the right or below, directly adjacent to the element unless a clear setting is applied.

Float Right

Floating an element to the right aligns it to the right within the parent element. Any lengthy paragraph or rich text directly below the floating element will wrap around that element unless a clear property is set.

Clear Configurations

Enabling clear on an element ensures it will not wrap around a floating element. This setting can be implemented on any element stacking beneath the floating element but cannot be applied to the floating element itself.

An element with the clear property set will not shift up beside the float as desired by the float but will instead relocate downwards past the float

Clear None

Clear None represents the default setting for most elements. Elements set to clear none will accommodate next to or wrap around any floating element immediately above it in the document flow.

If an element inherits a clear setting, such as from a larger breakpoint, you can clear any prevailing clear setting by establishing the clear to none.

Clear Left

Clear Left prevents an element from wrapping around a left-floating element.

Clear Right

Clear Right prohibits an element from wrapping around a right-floating element.

Clear Both

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