Positioning in CSS

#iwritecode

What is Positioning in CSS?

The CSS position property is used to set the position for an element. it is also used to place an element behind another and is also useful for the scripted animation effect.

Property of Positioning

The position property specifies the type of positioning method used for an element.

Types of Positioning :

  • static

  • relative

  • fixed

  • absolute

  • sticky

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

1. position: static;

This is a default position for HTML elements. It always positions an element according to the normal flow of the page. It is not affected by the top, bottom, left and right properties.

2. position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

3. position: relative;

The relative positioning property is used to set the element relative to its normal position.

4. position: absolute;

Absolute positioning is used to position an element relative to the first parent element that has a position other than static. If no such element is found, the containing block is HTML.

5. position: sticky;

An element with position: sticky; is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position: fixed).

Resources

Javapoint W3school