What is Position in CSS?

The CSS property – position – sets how an element is positioned in a document.

There are 5 main values of the Position Property:

position: static | relative | absolute | fixed | sticky

Note : The default position is static. It means, every element has a static position by default, unless they don’t have a position specifically set.

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.

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.

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

The element is removed from the normal document flow, and no space is created for the element in the page layout. 

Sticky

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor).

Helper Properties

Note : These properties don’t work without a declared position, or with position: static.

The below are the properties for setting the coordinates of an element inside a positioned element.

top | right | bottom | left AND the z-index

Codepen example explanation:

Position: Relative : places an element relative to its current position without changing the layout around it.

Position: Absolute : Places an element relative to its parent’s position and changing the layout around it.

In example, Box C is moved out of the flow to position itself relative to the parent container which has a positoin relative on it. If not, it would try to position to the nearest positioned element, i.e body.

Position: Fixed : is positioned relative to the viewport, or the browser window itself.The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.

Position: sticky : is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

Position: static : Every element has a static position by default, so the element will stick to the normal page flow.

What is this z-index?

We have height and width (x, y) as 2 dimensions. Z is the 3rd dimension. An element in the webpage comes in front of other elements as its z-index value increases.

Z-index doesn’t work with position: static or without a declared position. It only works if an element has any position other than static.