CSS Layout - the position Property

The position Property

The position CSS property decides how an element is positioned in a document. There are five different position values:

• static
• relative
• fixed
• absolute
• sticky
  

and then the top, right, bottom, and left properties determine how the elements should be located in the document.

Syntax

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

Values

• Static
  HTML elements are positioned static by default. If you don't specify the position property, the elements will be positioned according to the normal flow of the document. With the static value, the top, right, bottom, left, and z-index properties have no effect.

• Relative
  Similarly to the static value the element is positioned according to the normal flow of the document, but it lets you change an element's position. You can apply the top, bottom, right, and left properties to modify the position but it will move relative to itself, in reverse.

• Absolute
  The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

• Fixed
  An element with fixed position property 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 to position the element. A fixed element does not leave a gap in the page where it would normally have been located.

• Sticky
  An element positioned with sticky property will be located 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, and then it is fixed in the place.

Reference
developer.mozilla.org/en-US/docs/Web/CSS/po..
w3schools.com/css/css_positioning.asp