Positions (CSS)

The position property can help you manipulate the location of an elements. there are four type of Positions mainly used in CSS.

• Static(default)
• Absolute
• Fixed
• Sticky
• Relative

Static

HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. it is always positioned according to the normal flow of the page:

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Absolute

If a child element has an absolute value then the parent element will behave as if the child isn’t there at all

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

.element {
  position: absolute;
}

And when we try to set other values such as left, bottom, and right we’ll find that the child element is responding not to the dimensions of its parent

.element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

Fixed

The fixed value is similar to absolute as it can help you position an element anywhere relative to the document, however this value is unaffected by scrolling

Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

Sticky

An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

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

Relative

An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}