CSS Position Properties

Positions

The position property in CSS defines how an element is placed in the document and how its location is calculated using top, right, bottom, and left. There are five main values, each with distinct behavior.

• Static

This is default and this Element is positioned according to the normal document flow, and it doesn't have effect on moving positions like top, bottom, left & right.

div {
 position: static;
}

• Relative

This Element is positioned relative to its normal position in the document flow, and it moves on the top, right, bottom, and left properties will cause the element to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

div {
 position: relative;
}

• Absolute

This element is Removed from normal flow, and Positioned relative to the nearest position(non-static). and it can overlap other elements.

div {
 position: absolute;
}

• Fixed

An element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used set the final location of the element. A fixed element does not leave a gap in the page where it would normally have been located.

div {
 position: fixed;
 bottom: 10px;
 right: 10px;
}

• Sticky

An element toggles between a relative and fixed position, depending on the scroll position. A sticky element is positioned relative until a certain scroll position is reached then it behaves like fixed element. You must specify at least one of the top, right, bottom or left properties, for sticky positioning to work. because it only works on one property.

div {
 position: sticky;
 top: 0;
}