CSS position property

position property decides the alignment of an element with respect to the viewport or parent element. The alignment of an element may be fixed, absolute, relative or sticky. We'll discuss each of these alignments.

relative

relative value for the position property positions the current element relative to its original position.

In the following example, the element relatively moves away from its original position.

Example

<style>
div{
 position:relative;
 left:100px;
 top:100px; 
}
</style>
Try </>

left:100px; means that its left side is 100px away from its original position (moving backward).

top:100px; means that its top side is 100px away from the original position (moving downward).

absolute

absolute value decides the position of current element relative to the parent element or viewport.

Example

<style>
div{
 position:absolute;
 right:100px;
 bottom:100px;
}
</style>

Try </>

bottom:100px; means that its bottom side is 100px away from the bottom side of viewport.

right:100px; means that its right side is 100px away from the right side of viewport.

Remember that the element is positioned relative to the parent element. But if there is not parent element, then it is positioned relative to the viewport as in the above example.

See another example to understand.

Example

<style>
.internal{
 position:absolute;
 bottom:50px;
 right:50px;
}
</style>

Try </>

In the above example, the descedent element (.internal class element) is positioned relative to the parent element (.external class element).

If position property is not specified for the parent box, then position property of child box is of no use.

fixed

fixed value fixes the position of the current element. Its offset properties behave in the same way as absolute properties but in this case the element is fixed.

Example

<style>
div{
 position:fixed;
 bottom:50px;
 right:50px;
}
</style>

Try </>

bottom:100px; means that its bottom side is 100px away from the bottom side of viewport but it is fixed.

right:100px; means that its right side is 100px away from the right side of viewport but it is fixed.

sticky

sticky value positions in the same way as relative but its position may change when any of its side matches the parent side.

Example

<style>
.internal{
 position:sticky;
 bottom:50px;
 left:50px;
}
</style>

Try </>

static

It is the default value of the position property. top, right, bottom and left properties do not work for the static value.

Example

<style>
div{
 position:static;
 bottom:100px;
 right:100px;
}
</style>

Try </>

In this case, bottom and right properties don't work.

Next Previous