# CSS Position
You want to design a website where you want to control your element's position on your website like you want to stack on top of one another.
But if you want to do the above magic, you need to override your default website position. To do the above, you’ll use CSS `position` property.
# What is the position?
Position property helps to manipulate the location of the elements.
After applying for the position property then it will not change anything. To modify the position then you’ll need to apply the top, bottom, right and left properties, and in that way, you can move your element.
- `top` Element moves towards the bottom of the parent container.
- `bottom` Element moves towards the top of the parent container.
- `left` Element moves towards the right of the parent container.
- `right` Element moves towards the left of the parent container
## Types of position
- Static
- Fixed
- Sticky
- Relative
- Absolute
## Static
Every element has a static position by default. If we don’t mention the positioning method for any element, the element has the `position: static`. So, if there is a top, bottom left, or right set then there will be no effect on the element.
**Syntax**
```
.pos {
postion: static;
}
```
## Fixed
Element with `fixed` positioning allows it to remain at the same position even we scroll the page. We can set the position of the element using the top, bottom, left, and right.
**Syntax**
```
.pos {
position: fixed;
}
```
## Sticky
Element with `position: sticky` and `top: 0` played a role between **fixed** & **relative** based on the position where it is placed. Depending on the user how far the user has scrolled down the page, a sticky element behaves like a `relative` element until it touches the `**top**`. When it touches the **top**, it will be fixed at that place and appears to `stick` to the page as the user scrolls.
**Syntax**
```
.pos {
position: sticky;
}
```
## Relative
Element with `position: relative` is positioned with the other elements and if we set its top, right, bottom, and left then the relative element will move from its original place. After the relative element moves, then other elements will not fill up the gap left.
**Syntax**
```
.pos {
position: relative;
}
```
## Absolute
Element with `position: absolute` will be positioned with respect to its nearest parent. If there is no positioned parent element, the element that has position absolute will be positioned directly to the page itself (body).
**Syntax**
```
.pos {
position: absolute;
}
```
**Thank you for reading 👨💻. If you found this article useful. Share your feedback that would help me in the future.**