Different CSS Position Properties

Hi there, in this article I have discussed about various position properties you can use in CSS. So before starting about different position properties lets understand what Position actually do. CSS Position property basically defines how an element will be positioned in the HTML document. We can use top, bottom, left, right offset to set the final position of the element!

Like the below example we can use top, bottom, left and right. In this we have given top, bottom, left and right to the first div.

After the above example you must be wondering even after giving those offset to div there is no change to that! Here comes the use of position property. Without setting position property we cannot set offset to any value.

So now what different properties you can set for position??

Here is the list of different position properties you can use.

• static

• relative

• fixed

• absolute

• sticky

Static Positioning

All elements by default are positioned as static. It always position element according to normal flow of HTML document. In this positioning top, bottom, left and right has no effect.

Syntax:

position: static;

Eg.

In this example we have set position of first div as static and have given some properties and as expected those properties have no effect on that div.

Relative Positioning

In this type of positioning, element is adjusted relative to its original position based on the values of top, bottom, left and right. In this other content will not get adjusted to fill the gap that is left by relatively set element.

Syntax:

position: relative;

Eg.

In this we set div with class one as relative and you can see it gets adjusted based on the offset values and its gap is also not filled by other divs.

Fixed Positioning

In this type of positioning element gets fixed relative to the browser window and it does not even move when you scroll the page. Also in this positioning the gap created by this element gets filled by the next element.

Syntax:

position: fixed;

Eg.

In this example we have set the position of div with class six as fixed and have given some top and left offset to it, now we can see that its gap gets filled by the other elements and also when we scroll the page it does not move from its position.

Output after scrolling

Absolute Positioning

In absolute positioning element gets positioned relative to its first parent element that has position other than static and if no such parent is there then it uses document body as parent and moves along with it. Absolute positioned elements are removed from the normal flow, and can overlap elements i.e space created by them is filled by other elements.

Syntax:

position: absolute;

Eg.

In this example we have selected two divs and given them position as absolute. The div with class "one" takes document body as parent and gets aligned to right of the page as we have given right:0, whereas the div with class "four" has parent other div which has class "abs" which is positioned as relative so now this div will get positioned relative to this div and gets cornered to the right of that div.

Sticky Positioning

In sticky positioning, the positioning element gets positioned based on the offset(top, bottom, left or right) given and the space created by this element is not filled by any other element. It behaves like relative positioning until certain offset is match.

Syntax:

position: sticky;

Eg.

In this example we can see the div with class "six" is being targeted and it gets scrolled until the top reaches to zero and as soon as top reaches to zero it gets fixed over there and behaves like fixed positioning. And also the space created due to offset of this div is not filled by any other div. Output after scrolled

That's it on this article. I hope you gained some knowledge from this article about CSS positioning. Thank You!