Positions in CSS

There is a total of 5 different types of Positions.

1. Static
2. Relative
3. Absolute
4. Fixed
5. Sticky

Static :

This is the default position of the element, the element will be placed as a regular flow of HTML Document.

.div-a {
  /* If you not specify any position this will be by default */
  position: static;
}

Relative :

Here comes the interesting part. The element's relative position will be determined by the position where the element was placed by the browser or DOM. In position relative, you have unlocked some more properties like top, bottom, left, and right you can specify these properties to the element you want to position.

if you want this circle to move by 150px from the top where the element was placed go ahead and do this.

.div-a {
  position: relative;
  top: 150px;
}

see the before and after of this example

Note: The space occupied by the element which has the property of position: relative is as it was before. This means none of the other elements are gonna move anywhere.

Absolute :

This is also a very handy CSS property for absolute positioning as you want. the key thing about absolute positioning is: when the parent is positioned relative and the element is positioned absolute the top, bottom, left, and right will be with respect to the parent element. if none of the parent elements is positioned relative then the element will position itself with relative to the full webpage

In this case the parent element is NOT position: relative (positioned relative)

.div-a {
  position: relative;
  right: 0;
}

see the before and after of this example

Before

After

and if the parent element has position: relative

.div-a {
  position: relative;
  right: 0;
}

Before

After

Note: In position: absolute no space is allocated to the element, and it should be positioned from you.

Fixed :

The name of this property is very appropriate to this property, it makes the element fixed at one place and it has nothing to do with parent element. It completely ignores the position: relative of the parent element. The element is positioned with respect to the HTML document and it has something more to offer it never moves from where it is positioned it will always stick to that place only. Scroll the given example you will notice it that div-a is always on top right corner.

Take a look at the given example:

.div-a{
  position: fixed;
  top: 0;
  right: 0;
}

Sticky :

This property is vastly used when we have to make Navbar sticky. It is positioned normally as it has position: static but here we can define top, bottom, left, and right this property and when the given property is fulfilled it makes it position: fixed. Let's see what I am trying to say :

Example:

.div-a{
  position: sticky;
  top: 0;
}

Note : The sticky behaviour is only when the parent element is there if parent element ends this behaviour of being stick at one place is gone. Try to make it in 0.5x and then you will able to scroll at the very end of this example and you will be able to understand this properly.

• That's all from my side. Feel free to comment down your thoughts. Thanks