CSS Layout – The position Property

The position Property

The position property dictates the method of positioning utilized for an element.

Five distinct position values are available:

• static
• relative
• fixed
• absolute
• sticky

Subsequently, elements are positioned using the top, bottom, left, and right properties. However, these properties are ineffective unless the property is initially set. Moreover, their behavior varies based on the specified position value.

position: static;

By default, HTML elements are statically positioned.

Static positioned elements remain unaffected by the top, bottom, left, and right properties.

An element with position: static; is not specially positioned; it adheres to the standard flow of the page.

Below is the CSS being utilized:

Example

position: relative;

An element with position: relative; is positioned in relation to its default position.

When the top, right, bottom, and left properties are set for a relatively-positioned element, it will be displaced from its default position. However, other content will not be rearranged to fill any space vacated by the element.

Below is the CSS being employed:

Example

position: fixed;

An element with position: fixed; is positioned with respect to the viewport, ensuring it remains fixed in place even when the page is scrolled. Utilize the top, right, bottom, and left properties to position such an element.

A fixed element doesn’t leave a space on the page where it would typically reside.

Observe the fixed element located at the lower-right corner of the page. Below is the CSS employed:

Example

position: absolute;

An element with position: absolute; is positioned in relation to its nearest ancestor that has a defined position (rather than being positioned relative to the viewport, as with fixed positioning).

However, if an absolutely positioned element lacks any positioned ancestors, it defaults to the document body and scrolls with the page.

Keep in mind: Absolutely positioned elements are removed from the regular document flow and can potentially overlap other elements.

Here is a basic example for reference:

Below is the CSS utilized:

Example

position: sticky;

An element with position: sticky; adjusts its positioning in response to the user’s scroll behavior.

This type of element transitions between relative and fixed positioning, depending on the scroll position. Initially, it is positioned relatively, but once a specific offset position is reached within the viewport, it becomes “sticky” and remains fixed in place, akin to position: fixed.

In this instance, the sticky element adheres to the top of the page (top: 0) once you scroll to its designated position.

Example

Positioning Text In an Image

How to place text on top of an image:

Example

All CSS Positioning Properties