# Position in CSS
### What is position and why is it used?
Position property in CSS is used to set position of elements in the webpage.
## Values
1. Static
2. Relative
3. Absolute
4. Fixed
### Let's try to understand them one-by-one
#### 1. **Static**
This is the default value every element has in the normal flow of document. The `top`, `bottom`, `left`, `right` and `z-index` have no effect.
#### Let's take an example to understand it better
index.html
```
Positions in CSS
```
style.css
```
* {
margin: 0;
padding: 0;
outline: 0;
}
.container {
margin: 100px;
background-color: #add8e6;
border: 2px solid #000000;
width: 400px;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.sub-container {
border: 2px solid #a52a2a;
height: 100px;
width: 100px;
color: #ffffff;
margin: 20px;
}
.one {
background-color: #ffa500;
}
.two {
background-color: #4e2121;
}
.three {
background-color: #a014a0;
}
```
Output
![Capture.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1658572766562/-7eGkrie-.PNG align="left")
These all elements have a default position value of static. So, if we even if we specify `position : static`, it won't make any difference.
#### 2. **Relative**
In case of relative position, the effect is same as static by default but in this we can add `top`, `bottom`, `right` and `left`. It will move the element relative to the parent element. So, if we give `top : 10px`, then that element will move 10px from it's default position.
In this the element is not removed from the normal document flow.
```
.one {
position: relative;
top: 10px;
background-color: #ffa500;
}
```
Output
![image2](https://cdn.hashnode.com/res/hashnode/image/upload/v1658573239308/hSb1aXcZd.PNG align="left")
#### 3. **Absolute**
In case of absolute position, the element is removed from the normal document flow and it is positioned with respect to the closest positional ancestor if any, else it will positioned itself with respect to the body of the webpage. The position can be specified using `top`, `left`, `right` and `bottom`.
```
.one {
position: absolute;
top: 10px;
background-color: #ffa500;
}
```
Output
![image3](https://cdn.hashnode.com/res/hashnode/image/upload/v1658573795116/4c6EmtquF.PNG align="left")
As you can see that the container aligns itself with respect to the body of webpage as it does not have any positional ancestor.
If we mark the position of it's parent as relative, it will align with respect to it's parent which will result in something like this
![image4](https://cdn.hashnode.com/res/hashnode/image/upload/v1658574492951/_OMssVp75.PNG align="left")
#### 4. **Fixed**
In case of fixed position, the element is removed from the normal document flow and it is positioned with respect to the body of the webpage. The position can be specified using `top`, `left`, `right` and `bottom`.
```
.one {
position: fixed;
top: 20px;
background-color: #ffa500;
}
```
Output
![image5](https://cdn.hashnode.com/res/hashnode/image/upload/v1658574628356/bKAkHC16s.PNG align="left")
These were some positions in CSS. Surely there are some more to explore. You can explore more of them here (references for this article) :
- [Positions in CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
Thank you for reading this article, I hope you have learnt something new and valuable. See you in the next article!