CSS Positioning
Tags: css, webdev, programming, beginners
Published: 2022-10-16 12:55:04

```
.box {
  position: relative;
}
```
The position of an HTML element can either be **static**, **relative**, **absolute** or **fixed**. And recently, **sticky** has been added to the mix.
You can set the position of an element with the CSS property **position**
The **position** property works together with the properties **top**, **right**, **bottom**, and **left**. I'll call them _co-ordinate properties_. Co-ordinate properties function like margin properties and when I start explaining the different types of positioning, you'll understand it even more.

#Relative Positioning

You can position an element relatively by giving its **position** property the value of _relative_.

```
.box {
  position: relative;
  top: 20px;
}
```

When an element is positioned relatively, it is shifted from where it is originally supposed to be by 0px. This means its new position is relative to its old position. If you add a co-ordinate property like `top: 20px`, it is shifted in such a way that it will have a top margin of 20px from its original position.

When it moves to its new position, the elements around it don't re-arrange themselves to adjust to its new position. They stay put, behaving as if the relatively-positioned element is still in its original position.

You can add other co-ordinate properties to the element that is positioned relatively like the property **left**.

```
.relative-box {
  position: relative:
  top: 20px;
  left: 30px
}
```

The code snippet above will make the element with class `relative-box` to move down by 20px and move right by 30px so that it will have a top margin of 20px and a left margin of 30px from its original position.

Note that to a relatively-positioned element, if you add a _top_ property, the element moves **down**; if you add a _left_ property, the element moves **right** and the same applies to the other co-ordinate properties.

#Absolute Positioning

You can position an element absolutely by giving its **position** property the value of _absolute_.

```
.absolute-box {
  position: absolute;
  top: 20px;
}
```

Absolute positioning works similarly to relative positioning. It works together with co-ordinate properties. There are just a few differences.

**Differences between absolute and relative positioning**

> Relatively positioned elements are positioned relative to their original position but absolutely positioned elements are positioned relative to the HTML's body tag(`<body></body>`).

> If you don't set any top, left, bottom or right properties on `.relative-box`, the element will stay in its original position but if you don't set any of those properties on .absolute-box, you will find `.absolute-box` at the top-left corner of the page.

> When you position an element absolutely, the other elements in the page will re-arrange themselves to adjust to the new position of the element in the page.

This means that when you add a co-ordinate property to set its margin, the element will have that margin but the margin will be from the edge of the page, and not from its original position.

```
.absolute-box {
  position: absolute;
  top: 10px;
  left: 20px;
}
```

The code snippet above will make the element `.absolute-box` to have a top margin of 10px from the top of the page and a left margin of 20px from the left of the page.

Absolute positioning has another important behavior. You can use absolute positioning to position an element relative to another element. 

If the parent of `.absolute-box` is relatively positioned, `.absolute-box` will be positioned relative to that parent.
This means that `.absolute-box` will have a top margin of 10px from the top edge of its parent and a left margin of 20px from the left edge of its parent.

Long story short, an element that is positioned absolutely will be relative to the body of the page but if it is inside a parent element that is positioned relatively, it will be positioned relative to that parent.


#Fixed Positioning

```
.fixed-box {
  position: fixed;
  top: 5px;
  left: 10px;
}
```

An element with a fixed position will be placed in a position **relative to the browser window**. It is taken out of the flow of the page completely and it will not scroll along with the page. It will stay fixed at a particular point.

The element with class `fixed-box` will have a top margin of 5px from the top of the browser window and a left margin of 10px from the left of the browser window.

If you don't add any **top**, **left**, **bottom** or **right** properties, you'll find `fixed-box` at the top-left corner of the browser window.

When you give an element a fixed position, the other elements on the page will re-arrange themselves in response to the fixed element being removed from the page.

#Static positioning

All HTML elements are positioned statically by default. Static is the default position of HTML elements on the page.