# CSS Position Guide

# Content Guide

1. Static Position
2. Relative Position
3. Absolute Position
4. Fixed Position




## HTML and CSS example reference for this guide


**HTML**

```
 <body>
    <div class="Parent-Box">
      <div class="box one">one</div>
      <div class="box two">two</div>
      <div class="box three">three</div>
    </div>
  </body>
``` 

**CSS**
```
.Parent-Box {
  border: 5px solid red;
  display: inline-block;
}
.box {
  font-size: 50px;
  color: white;
  border: dotted 1px black;
  height: 150px;
  width: 150px;
  background-color: #483434;
  display: inline-block;
}
.one {
  background-color: #eed6c4;
}
```

**Result**

![Webpage-Content.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658270548319/v2cLeKVyR.png align="left")

------
## Static Position

Static is the default position of every element, and properties top, right, bottom, and left do not affect the position of the element

Example 

**CSS**
```
.one {
  background-color: #eed6c4;
  position: static;
}
```
**Result**

![static-position.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658270639904/1A29NXomu.png align="left")

-------
## Relative Position

A relative position element works exactly the same as static position, but you can now add z-index, top, left, right, and bottom properties to it

Example 

**CSS**

```
.one {
  background-color: #eed6c4;
  position: relative;
  top: 40px;
  left: 40px;
}
```
**Result**


![Relative-position.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658270826888/ikcdHiYQA.png align="left")

-------

## Absolute Position

The absolute position is the first position that completely removes the element from the normal document flow. If you give an element position absolute all other elements will act as if the absolute positioned element doesn't even exist.

Example 

**CSS**
```
.one {
  background-color: #eed6c4;
  position: absolute;
  top: 80px;
  left: 50px;
}

```
**Result**

![Absolute-position.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1658271014911/jC4v9wUwC.png align="left")

-------

## Fixed Position 

Fixed position is a bit like an absolute position in that it removes the element from the document flow, but fixed position elements are always positioned relative to the screen no matter what position its parent elements are.

Example 

**CSS**
```
.Parent-Box {
  border: 5px solid red;
  display: inline-block;
  height: 300vh;
}

.one {
  background-color: #eed6c4;
  position: fixed;
  top: 80px;
  left: 50px;
}
```

**Result**

![fixed-position.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1658271441257/cTDViyNBI.gif align="left")

-------