CSS Positions

In today’s article, we are going to learn and understand CSS position property. It Is very important to know these properties in order to be a good front-end developer.

So what is CSS position property?

The CSS position property is used to define the position of an element within a document. And we can do so with the help of top, left, right, bottom, and z-index properties.

So mainly there are 5 position values that can be considered

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

So let’s talk about them one by one.

Static

By default the position value of an element is static. These properties like top, left, right, bottom and z-index will not affect the position of an element. The element will be positioned as per its normal flow.

Syntax

selector{
    position:static;
}

Let us understand this with an example.

In the above code, we have declared three divs in a parent class and provided them with the class as main and child. In the main class, we have set the position as static and added right and top properties. In the output there will be no change made to the position of the main class as the position static has no effect on these properties.

Fixed

With the position property set as fixed the element will remain fixed on the page and won’t move its position even when you scroll the page. We can use the top, bottom, left, right properties in order to fix an element at a specific position.

Syntax

selector{
    position: fixed;
}

The above code will place the div with the main class at the right top of the page and it will be fixed at that position even when we scroll the page.

Relative

The Position:relative element stays in the normal flow of the document. However, unlike static elements, the left, right, top, bottom, and z-index properties affect the element's position. Applies an offset to the element relative to itself based on the values ​​of the left, right, top, and bottom properties.

Syntax

selector{
    position: relative;
}

In the above code note that the left and bottom properties affect the element's position. Also, note that the element stays in the normal flow of the document and the offset is applied with respect to itself.

Absolute

Elements with position: absolute are positioned relative to their parent element. In this absolute position, the item is removed from the normal document flow. Other elements behave as if these elements were not included in the document. The left, top, bottom, and right values ​​determine the final position of the element.

Note that elements with position: absolute are positioned relative to their closest positioned ancestor. This means that the parent must have a position value other than position: static.

If the parent does not have the position property set, the body of the document is used. So to position an element according to its parent, you need to give the parent a position property.

Syntax

selector{
    position: absolute ;
}

In the above code note that no space was created for the element in the document. Elements are positioned relative to their parent element.

Sticky

position: sticky is a mixture of position: relative and position: fixed. It behaves like a relatively positioned element up to a certain scroll point, after which it behaves like a fixed element. We will understand this with an example.

selector{
    position: sticky;
}

So in the above example, we can see that in the beginning, the element behaves like a relative, and once we scroll then it acts like a fixed element.

So yes this is prettymuch about CSS position properties, hope this article helps you and gives you some idea about it.