In this article, we will learn about the position property in CSS.

Position Property in CSS

The CSS position property sets the position of the HTML elements.

The position property specifies the type of positioning in the element.

There are the following values of Position Property in CSS:

• Static
• Relative
• Absolute
• Fixed
• Sticky

We can also position the element using top, bottom, left, right properties. but we can use these properties only if the position property is already been set.

● Postion: Static

The static position is by default the position of an HTML element and It positions the element according to the normal flow of the page. Therefore top, bottom, left, right and the z-index property has no effect on it.

For Example:

div {
     position: static;
     border: 2px solid green;
     }

Output:

● Position: Relative

The relative position is positioned according to the normal flow of the document. It sets the position of the element relative to its original position and the top, bottom, left, and right properties can affect the position of the element.

If the position of the element changes then it leaves a gap at the initial position. but other elements do not have any effect due to this.

For Example:

div {
     position: relative;
     top: 20px;
     left: 50px;
     border: 2px solid green;
     }

Output:

● Position: Absolute

When we position an element to absolute. It is removed from the normal flow of the document and overlaps the other elements.

It is positioned relative to the closest positioned ancestor. however, If it has no ancestors. then, it is placed relative to the initial containing block or document body.

However, the final position is determined by the values top, bottom, left, right.

For Example:

div {
     position: relative;
     width: 300px;
     height: 300px;
     border: 2px solid green;
     }

div.absolute {
              position: absolute;
              top: 80px;
              right: 10px;
              width: 100px;
              height: 150px;
              border: 2px solid green;
              }

Output:

● Position: Fixed

When we position an element to Fixed. It is removed from the normal flow of the document and no space is created for the element in the page layout.

It is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. basically, it is fixed on the webpage.

The position of the element can be changed using top, bottom, left, and right properties.

● Position: Sticky

The sticky position is positioned according to the normal flow of the document. Its position is based on the user’s scroll position.

A sticky element toggles between the relative and fixed position. Its positioned as relative until a given offset position is met. then it’s fixed in the place as position fixed. it does not affect the position of any other elements.

That’s all about the Position Property in CSS.

Hope this article will guide you to recognize all about the Position Property in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.