CSS position

Position can be confusing for lot of beginners . In this article I will try to make positions as simple as possible.

The CSS position helps us to move the element in the desired location .

Normal flow of element

To understand the normal flow of element we should have the basic idea of block elements and inline elements.

Block element :

The block element always starts on new line . It takes the full available width from left to right .

Inline element :

An inline element does not start from a new line . An inline element does not start from a new line.

There are five types of position :

1. Static
2. Relative

3. Absolute

4. Fixed

5. Sticky

After giving an element position we have to further on give values to an element in order to move that element in x-axis or in y-axis such as top , right , bottom ,left .

.box-3{
position : relative ;
top : 100px ;
left : 130px ;
}

Static :

The default position of all the elements in a webpage is a static position. Interestingly , even if we give values from top , right , bottom or left still the element will not be move .

#box3{
    position: static;
    top: 20px;
    left: 10px;
 }

Relative :

If we give an element a relative position then that element move according to its old position . But if we give an element relative position and if that element is moved in comparison to its old position that elements leave a blank space . Relative position keeps the element in flow of the document .

#box3{
    position: relative;
    top: 50px;
    left: 50px;
 }

Absolute :

This is little bit tricky position to understand .If you want to move an element with relative position than the parent of that element should have a other than static position , in order to get unpredicted results .

If parent element have a default position static than that element move according to the position of the grandparent element . But if the grandparent also have the static position than the child element move according to the webpage .

When you assigned an element absolute position then that element is removed from the normal document flow .

Moreover the space that child element was originally occupying is no longer there .

header{
   position: relative;
}
#box3{
    position: absolute;
    top: 50px;
    left: 50px;
 }

Fixed :

To give an element fixed position means element will be fixed regardless of its prior position .

If element has a fixed position and that element is moved from its old position than that element removed from the document flow .

When the element is moved from its prior position than element will not leave any blank space . In most of the cases fixed position is used to place chat boxes in the webpage in the bottom right corner .

#box3{
      position: fixed;
      bottom: 50px;
      right: 50px;
 }

Sticky : This position is also little bit confusing to understand in the first go . This position works when we scrolls the webpage . For instance box three is fixed to the bottom right corner when wee scrolls the webpage .

From its name we can estimates that it sticks to a particular point.

This position also removed the element from the flow of the document when element is reached to its defined position .

Mostly this position is used to make sticky navbar.

```CSS .nav{ position: sticky; top: 0px;

}