Positioning

Positioning allows us to take an element out of the normal flow of the document and manipulate its location. CSS has positioning schemes like normal flow, relative positioning, and absolute positioning that allow us to control the layout of the page. We specify the positioning scheme using the position property in CSS and four offset properties i.e. top, right, bottom, and left to control the element's position.

The possible values for the position properties are: static, relative, absolute, fixed, and sticky.

static

static is the default value for the position property which means that the element is put in the normal flow of the document. The top, right, bottom, and left properties have no effect.

In the below example, <p> element with class "static-para" has a static position but has no effect on the element.

https://codepen.io/tiwariraw/pen/PoBQJdN?editors=1100

relative

Relative positioning moves an element in relation to where it would have been in the normal flow i.e. the elements are moved in relation to their original position in the document.

We can then use the offset properties (top, right, bottom, left) to indicate how far to move the element from its original position. The offset does not affect the position of any other elements and hence the content of the relatively positioned element can overlap with other elements on the page.

https://codepen.io/tiwariraw/pen/oNMEogN?editors=1100

Note: By just setting the position as relative, no change will be observed. Use offset properties to see the effects.

absolute

When the position is given a value of absolute, the box is taken out of the normal document flow (space for it is not reserved in the layout) and no longer affects the position of other elements on the page. (They act like it is not there.)

The box offset properties (top, right, bottom, left) specify where the element should appear in relation to its parent element (first non static member if any) otherwise to root element(html).

In the example below, as the parent container doesn't have any position property specified, the Move Me box will be positioned w.rt. the root element.

https://codepen.io/tiwariraw/pen/MWBQOqR?editors=1100

In this example, the parent container's position is relative, therefore Move Me box is positioned relative to the container.

https://codepen.io/tiwariraw/pen/LYBQOqR?editors=1100

fixed

Fixed positioning is a type of absolute positioning that requires position property to have a value of fixed. The element is removed from the normal document flow and there is no space reserved for it in the layout.

The element is positioned relative to the browser window(viewport) and therefore it is fixed i.e. when a user scrolls down the page, it stays in the exact same place. The final position of the element is determined by the offset properties. (top, right, bottom, left)

It is used to create a fixed "Chat with us" option which appears on the bottom right side of the page on many websites.

https://codepen.io/tiwariraw/pen/eYjVypm?editors=1100

sticky

Here, the element is positioned based on the user's scroll position. It is basically a hybrid of relative and fixed position. The element acts relatively positioned till a threshold is reached and after that, it behaves as fixed.

In the below example, the header is stuck to the top of the page irrespective of the scrolling.

https://codepen.io/tiwariraw/pen/poZapKj?editors=1100

Example 2: scroll to see the effects (20px from the top of the viewport, after which Box3 becomes sticky).

https://codepen.io/tiwariraw/pen/MWBQVXx?editors=1100

Hope you enjoyed reading the article. Please provide your valuable feedback for improvements.

Ashish