# Positioning in CSS Positions...

## CSS Positions
The most annoying part of styling is to position that one `div` which refuses to obey css commands. It's frustrating and mentally draining ***BUT*** why does this happen in the first place? This Article will help you understand the nature of various positions in CSS to prevent such things from happening. 
There are various types of CSS Positions. We will cover them here. 

### Position Static
Now this is a very common position, the default position of HTML is `static`, This position allows a normal flow of the document and displays things as they are ordered in HTML. The `top`,`right`,`left`,`bottom`, and `z-index` properties do not affect `position: static`.
```html
<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>
```
CSS
```css
  .parent{
}
.child1{
}
.child2{
}
.child3{
}
```
OUTPUT

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658669338290/OzufJn7nm.png align="left")

### Position relative
This position stacks on top of the position static as if it contained a `z-index` and stacks on top of the normal flow of the document. The Offset values of `top`,`right`,`left` and 
 `bottom` shows it. For example

HTML
```html
<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>
```
CSS
```css
  .parent{
}
.child1{
    position: relative;
    left: 50px;
    
}
.child2{
}
.child3{
}
```
OUTPUT

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658669130375/XqCTzwN-u.png align="left")

When we add more offset parameters

CSS
```css
  .parent{
}
.child1{
    position: relative;
    left: 50px;
    top: 20px
}
.child2{
}
.child3{
}
```
OUTPUT

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658669100562/fKTZVrjnS.png align="left")

Effect of `position: relative` on `table-row`,`table-column`,`table-cell` elements is undefined. Also, the `relative position` of the element does not affect the other elements positioned in the HTML Document

### Position Absolute
The `absolute` position removes the element from the normal flow of the document and is positioned to the closest positioned ancestor, if there is no closest ancestor it will be placed` relative` to the page. After which we can assign it the offset values of `top`,`right`,`bottom`,`left` which will decide its final position

HTML
```html
<div class="parent">
    <div class="child1">There is</div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>
```
CSS
```css
  .parent{
}
.child1{
    position: absolute;
    left: 100px;
    top: 30px;
}
.child2{
}
.child3{
}
```
OUTPUT

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658670558330/YTCihuOK6.png align="left")
As you can see the `child1` has been aligned according to the page and not according to its parent div. And the behavior of other elements is as if the `child1` didn't exist.
### Position Fixed
This is very similar to the `absolute` position as it will also be removed from the flow of the document/page. But `fixed` will always be relative to the document and is unaffected by scrolling. For example in the above HTML

```css
.parent{
}
.child1{
    position: fixed;
    left: 100px;
    top: 30px;
}
.child2{

}

.child3{

}


```

OUTPUT

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658671030432/BHSPrGAyM.png align="left")

 In the sample, you can see that even when scrolling the child1 has maintained its position according to the offset value as it is sticking to the document. It can be used to create floating elements that are always in the viewport

### Position Sticky

This is a very unique position, `sticky` can be considered as a hybrid of the `relative` and `fixed` position. Until we reach the end of the viewport it acts as if it were relative and as soon as we cross the threshold of the viewport when scrolling, it starts behaving like a `fixed`. It requires at least one of the offset values to stick to.


This brings us to the end of our learning journey with CSS Position. Hope the article helped you. Thanks and Keep Learning