CSS 101 - Position static vs relative vs absolute 
Tags: css, beginners, tutorial
Published: 2021-03-17 04:11:18

---
title: CSS 101 - Position static vs relative vs absolute 
published: true
description: 
tags: CSS, beginner, tutorial
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--SfWzjSi6--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/y0qmpmhtnw1db8s4jxx9.jpg
series: CSS 101
---

One of my 2021 resolution is to strength my knowledge of CSS. I postpone the training since almost one year. So this time no excuse, everyday, I will publish here on Dev.to what I learn from my CSS course the day before.

Click follow if you want to miss nothing. 

<h2>CSS Position</h2>
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

<b>position: static;</b>
The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.

<b>position: relative;</b>
The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

<b>position: absolute;</b>
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

<b>position: fixed;</b>
Similar to position: absolute but relative stay to viewport and not the page like absolute. 

Let create a example. Create those elements:
```html
<body>
    <div>BOX 1</div>
    <h1>position: static;</h1>
    <div>BOX 2</div>
</body>
```

```css
div {
    color: lighgray;
    font-size: 20px;
    background-color: darkgray;
    border: solid gray;
    padding: 10px;
    height: 40px;
    margin: 10px;
  }


h1 {
  background-color: red;
  margin: 10px;
  padding: 10px;
  font-size: 20px;
  border: solid;
  position: static;
  left: 20px;
  top: 10px;
}
```
Static (left and top are ignore):
![static](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk6td165irx3su0pw3fq.png)

Relative 
```css
div {
    color: lighgray;
    font-size: 20px;
    background-color: darkgray;
    border: solid gray;
    padding: 10px;
    height: 40px;
    margin: 10px;
  }


h1 {
  background-color: red;
  margin: 10px;
  padding: 10px;
  font-size: 20px;
  border: solid;
  position: relative;
  left: 20px;
  top: 10px;
}
```
Relative (element position left 20px and top 10 px from original position)
![relative](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxsf2e0n0dslxceaveuh.png)
Absolute
```css
div {
    color: lighgray;
    font-size: 20px;
    background-color: darkgray;
    border: solid gray;
    padding: 10px;
    height: 40px;
    margin: 10px;
  }


h1 {
  background-color: red;
  margin: 10px;
  padding: 10px;
  font-size: 20px;
  border: solid;
  position: absolute;
  left: 20px;
  top: 10px;
}
```
Absolute (element position left 20px and top 10 px from page)
![absolute](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pzubjxwunzmmhv7t09p.png)


<h2>Conclusion</h2>
That's it for today. Tomorrow the journey continue, see you later! If you want to be sure to miss nothing click follow me here or on twitter!

Follow me on Twitter: <a href="https://twitter.com/justericchapman?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @justericchapman</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>