# CSS Position


## 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**
1. **Relative**
1. **Absolute**

1. **Fixed**

1. **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 .

```CSS
.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 .

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

![static.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1670482345037/9ntUCvLtv.PNG align="left")
 **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 .

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


![relative.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1670482389806/xeWAovyXu.PNG align="left")

 **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 .


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

![absolute.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1670481918452/pC9tD61pf.PNG align="left")
 
 **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 .

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

![fixed.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1670481936311/OuqwWsC1e.PNG align="left")

 **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;
   
}


![sticky.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1670481974925/fJgiM6f_j.PNG align="left")