CSS Position

What are the differences between relative, absolute, and fixed positioning in CSS?

posted on: 20 April 2022

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 element is positioned according to the normal flow of the document.

• static

  Default value. Elements render in order, as they appear in the document flow.

• relative

  The element is positioned relative to its normal position, and then offset relative to itself based on the values of top, right, bottom, and left. So "left:20px" adds 20 pixels to the element's LEFT position. The offset does not affect the position of any other elements.

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

• absolute

  The element is positioned relative to its first positioned (not static) ancestor element. other elements are positioned as if it did not exist. The element will scroll along with its container.

• fixed

  Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport(most of the time). The element is positioned relative to the browser window (This means it's position is fixed on the viewport and it won't move along when the text or container scrolling up or down)

Please check the example below. Notice how the relative box is scrolling with the text, the absolute box is scrowlling with the page, and the fixed box is fixed on the viewport.