Position in CSS

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

There are five different position values:

• static
• relative
• fixed
• absolute
• sticky

Absolute

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

.abs-element {
  position: absolute;
}

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. See the child element in the demo below and how, once you scroll, it continues to stick to the bottom of the page.

.fixed-element{
  position: fixed;
}

Sticky

The sticky value is like a compromise between the relative and fixed values. As of this writing, it is currently an experimental value, meaning it is not part of the official spec and only partially adopted by select browsers. In other words, it’s probably not the best idea to use this on a live production website.

.sticky-element {
  position: sticky;
}

Relative

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

.rel-element{
 position: relative;
}

Static

The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.