CSS is used to specify the styles of a web page. It describes the format and presentation requirements for an HTML document. CSS includes a wide variety of features that can be used to style HTML documents. The CSS Position property will be covered in this article.

What is CSS Position Property

The CSS position property specifies where an element should be placed in a document. This property, along with the left, right, top, bottom, and z-index properties, determines an element's final position on a page.

5 values in this position property in CSS

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

Static Position

By default, HTML elements are static in position. The top, bottom, left, and right properties have no effect on static-positioned elements.

For example, if three additional elements are added to a web page with static positioning, it will take the normal flow of the page. Therefore, no matter what modifications you make to the top, right, bottom, left, or z-index properties, nothing will change.

This is the normal flow of a document without using any positioning properties.

After applying position: static

#red { position: static; }

This is the default position after applying position: static to the red box. It will not change because, by default, HTML elements are static in position.

Relative Position

In relative positioning, the element is first placed in line with the normal flow of the document and then offset with respect to itself using the top, right, bottom, and left values.

For example, if you want to move a red box, you must set the position to be relative and provide the necessary values like top, bottom, left, right, or z-index.

When you move an element relative to another, its original space will remain in the normal flow even after you change its position. Looking at the image below, you can see that the red box has moved next to the blue box, but the original space is still blank because it will not be removed from the normal flow.

After applying position: relative

#red {
  position: relative;
  left: 15px;
  top: 50px;
}

Absolute Position

In absolute positioning, the element is removed from the normal document flow, and no space is made in the page layout for it. It is positioned relative to its parent; the parent element must have a position property value other than static for the absolute position to work; otherwise, it is positioned relative to the viewport. The values of top, right, bottom, and left determine its final position.

For example, if the parent element has a position property like relative, then the child element will be positioned relative to its parent.

#parent {
      position: relative;
}
#red {
   position: absolute;
  left: 15px;
  top: 50px;  
}

Let’s say if the parent element doesn’t have any position properties, then the child element (the red box) will be positioned relative to the viewport.

Fixed Position

An element that has its position fixed stays in the same spot regardless of how far the page is scrolled since it is positioned relative to the viewport. Element's position can be adjusted according to the top, right, bottom, and left properties.

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

#red {
  position: fixed;
  top: 20px;
}

Sticky Position

Sticky positioning is a mix of fixed and relative positioning. The element is viewed as relative until it passes a certain threshold, at which time it is treated as fixed.

A threshold must be provided in order for an element to be sticky; therefore, at least one of the following properties, like top, bottom, left, or right, must have a value other than auto.

#red {
  position: sticky;
  top: 0;
}

I hope you understand the different values in the position property and how they behave.

Thanks so much for getting to the end of it! Make sure to follow me on Twitter for more such content!