CSS Position is a most important of CSS command list. It"s decide that HTML tag where to stay or not. You can full control you div or any HTML tag for positioning that where this stay or not.

Kinds of CSS Position

1) Static Position: This is default position. If you don"t use any position in a class then it will be default used which class. If you use this Position so the class can"t any change for use this position.

How to use CSS Static Position?

.divstatic {
     position: static;
}

2) Fixed Position: This position make sure that this div or HTML tag is fixed. If you want to make a fixed nav or menu you can use this position.

How to use CSS Fixed Position?

.divfixed {
     position: fixed;
}

3) Relative Position: This position set positioning relatively from his normal positioning. 

How to use CSS Relative Position?

.divrelato {
     position: relative;
}

4) Absolute Position: This position set positioning absolutely. If an absolute positioned div has no positioned s, it uses the document body, and moves along with page scrolling.

How to use CSS Relative Position?

.relativediv {
    position: relative;
    width: 400px;
    height: 200px;
    border: 1px solid red;
    border-radius: 10px;
} 

.absolutediv {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

Output for absolute and relative position. The circle div position is relative and square div position is absolute. That means relative position always find absolute position. If he can"t find any absolute div in their near area then he follow page positioning.

3) z-index: This command control who stay topper. That means if you want to a div to top form another div then you can control it by z-index. Example if you want to Div-1 stay top from Div-2 then you can use z-index 0 for Div-2 and use z-index 100 or more for Div-1 then you can see that Div-1 sstay top from Div-2.

How to use CSS Relative Position?

.div1{
     z-index: 100;
}

.div2{ 
  z-index: 0; 
}