Have any confusion with understanding CSS positions

You are a Web –Developer or a Web– Designer. Are you confuse with the CSS positions property,no problem today we will try to
understand this. First of all we will
talk about the CSS positions. When we create a web page of any website then the
content that is placed on that web page that content will take a position
which will call the CSS position. If we talk about the types of CSS positions
then there are various types of CSS positions.

Types of CSS Positions

Let see that how much types of CSS positions. There are
various types of CSS positions which are as follows –

Static

Relative

Absolute

Fixed

Sticky

Mainly CSS positions are of 5
types. These were the five types of CSS positions. Let see how they work.

CSS Static Position

This is the
first type of CSS positions or in other word we can say that static is the
default position of any content on the web page. If we don’t declare any
position to the content or any section on the web page, then it will take the
default CSS position that is the Static position.

CSS Relative Position

Relative is
the second one type of CSS position. If we want to place element to the new
position in comparison of its normal position, then we will use the CSS relative
position. That means we can place element to the new position with its left or
right relation by using the Relative position. For example –

If there is
any div with class nameDigitfeast like
that –

<div
class=”digitfeast”>

content

</div>

Then the CSS
for that div will be :-

.digitfeast{

Position:relative;

Width:100px;

Height:100px;

Left:50px;

Top:50px;

}

After this
CSS the div digitfeast will place 50px from left and 50px from top. And when we
use relative position for any element then it will not affect the other element
on web page.

CSS Absolute Position

CSS absolute
position plays a very important role. When we assign the absolute position to any
element then it will be relative to its parent element. Like that if there are two
boxes on a web-page. First one is Box-1 and the second one is Box-2. Now we want to
place Box-2 to inside the Box-1, in this condition, we will use position
absolute for Box-2. Or in other word we can say that we use absolute position
when we want to place an element in the other element. You can understand
this in a better way with this example.

CSS Fixed Position

Next is fixed
position. The role of CSS fixed position depends on its name. When we want to
fix an element in selected position, then we will use the CSS Fixed position. When
we declare the fixed position to any element on a web page, then it will be fixed in that position and will not disappear when the page will scroll.

CSS Sticky Position

Last one is
the sticky position. It is a mixture of Relative and Fixed position. We will
use Sticky position when we want to stick any Section or navbar on the web page
scroll. You can understand in a better way with this example.