Today I Learn About CSS Position Property

By using CSS position property, we can set the position of the document element.

Below are the property value. We can use any of the mentioned values for an element.

For setting a specific location to the element we have to use offset (top, left, bottom, right) property with the position property. This four property will set the exact location of the element.

{
    position: static;
    position: relative;
    position: absolute;
    position: fixed;
    position: sticky;
}

Let's determine the position property one by one.

Static

This is the default value of an HTML document. If we set any element position to static (we don't need to), we will not get any effect. The offset (top, left, bottom, right) property also has no effect with static position.

Let's try a CSS code.

From the above snippet we can see that the static box has no effect. We used the property value to 100px left, but it didn't move from its default position.

Relative

Relative property works on the normal flow of an HTML document unless we set the offset of the element using (top, left, bottom, right). The offset will change the position of the element from the default position of that elelement.

Setting offset property for that element does not affect the position of any other elements;

Absolute

When the document position set to absolute then the element removed from the normal document flow.

No space is created for the element in the page layout. It is positioned to its closest ancestor unless we set the offset value for that element using (top, left, bottom, right).

Uncomment the offset property of the .absolute class and see the effect in action for the absolute position.

We can see that the absolute box element does not take any space from the container layout it sit over the static box element. We can set the location if the absolute box layout by setting the offset value.

Fixed

When the document position set to fixed, then the element removed from the normal document flow.

No space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, unless we set the offset value for that element using (top, left, bottom, right).

Uncomment the offset property from .fixed class and scroll down the page then we will see that the fixed box not going to scroll up it is sitting the exact position.

Sticky

Sticky position property works on the normal flow of an HTML document and then offsets relative to its nearest scrolling ancestor and containing block. The offset does not affect the position of any other elements.

See the above code example.

That's for today. We will continue tomorrow. Happy Coding 🎉.