The position property can help you manipulate the location of an element in the document. The positioning of an element can be done using the top, right, bottom, and left properties. These specify the distance of an HTML element from the edge of the viewport. Position property has several values,

• static: every element has a static position by default, so the element will stick to the normal page flow.
• fixed: An element with fixed positioning allows it to remain at the same position even we scroll the page.
• sticky: The element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick.
• relative: An element’s original position remains in the flow of the document, just like the static value.
• absolute: An element with position: absolute will be positioned with respect to its nearest positioned ancestor.
• inherit: the position value doesn’t cascade, so this can be used to specifically force it to, and inherit the positioning value from its parent.

Static

every element has a static position by default, so the element will stick to the normal page flow. So if there is a left/right/top/bottom/z-index set then there will be no effect on that element. If we don’t mention the method of positioning for any element, the element has the position: static method by default. The element will be positioned with the normal flow of the page.

.element {
  position: static;
}

Fixed

The HTML element with position: fixed property will be positioned relative to the viewport. An element with fixed positioning allows it to remain in the same position even we scroll the page. We can set the position of the element using the top, right, bottom, and left.

.element {
  position: fixed;
}

Sticky

the element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick.

.element {
  position: sticky; top: 50px;
}

The element will be relatively positioned until the scroll location of the viewport reaches a point where the element will be 50px from the top of the viewport. At that point, the element becomes sticky and remains at a fixed position at 50px on top of the screen.

Relative

An element with position: relative is positioned relatively with the other elements which are sitting at top of it. If we set its top, right, bottom, or left, other elements will not fill up the gap left by this element. An element with its position set to relative and when adjusted using top, bottom, left, and right will be positioned relative to its original position. The positional properties “nudge” the element from the original position in that direction.

.element {
  position: relative;
}

To determine the amount of offset, you set values for the top, right, bottom, and/or left properties. Surrounding elements won’t be affected, but there will be space where the repositioned element would have been (in static positioning).

In this example, I’ve offset div 2 by 30 pixels down (with the top property) and 30 pixels to the right (using the left property). The repositioned div does not affect the position of surrounding elements.

When using position: relative, the z-index value should be set to auto unless you want to create a new stacking context. Essentially, a new stacking context means you create a new set of layers that will be stacked based on that element.

Absolute

An element with position: absolute will be positioned relative to the nearest positioned ancestor (a positioned ancestor is any element with a position value besides static, the default). The element ignores the normal document flow and other elements will behave as if it’s not even there while all the other positional properties will work on it. The positioning of this element does not depend upon its siblings or the elements which are at the same level. If a child element has an absolute value then the parent element will behave as if the child isn’t there at all.

.element {
  position: absolute;
}

Here, div 2 is placed inside a container div (in gray) and positioned relative to the container, since the container is the nearest ancestor element of div 2.

If there’s no positioned ancestor, the element is positioned relative to the containing block and moves with scrolling.

CSS Position: Relative vs. Absolute

When an element's computed position value is defined as fixed or absolute, it assumes the absolute CSS position. When the computed position value is relative, it assumes the relative CSS position. In both cases, the top, right, bottom, and left properties specify the offsets from the element's position.

While relative-positioned elements remain in the flow of the document, absolute-positioned elements are taken out of the way of the other elements on the page. All other elements are positioned out as if the absolute-positioned element were not there.

Thank You

Looking forward to your valuable feedback.

If you enjoyed this blog

follow me on Linked In