Position

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.

The position property can help you manipulate the location of an element, for eg:

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

/ Global values / position: inherit; position: initial; position: revert; position: revert-layer; position: unset;

Values:

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.

relative: an element’s original position remains in the flow of the document, just like the static value. But now left/right/top/bottom/z-index will work. The positional properties “nudge” the element from the original position in that direction.

absolute: the element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it.

fixed: the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.

sticky (experimental): 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.

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.

Absolute:

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

.

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, but the document:

.

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.

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.

What does it do? Well, it allows you to position an element relative to anything on the document and then, once a user has scrolled past a certain point in the viewport, fix the position of the element to that location so it remains persistently displayed like an element with a fixed value.

Relative:

To make the child element positioned absolutely from its parent element we need to set this on the parent element itself: