# DOM Positioning

## Overview

`static`: Default position. It does not allow setting properties like `top`, `bottom`, `left`, `right`, `z-index`

`relative`: Acts the same as `static`. but allows positioning it relatively by putting properties like `top`, `bottom`, `left`, `right`, `z-index`

`absolute`: Remove the DOM from the DOM tree and position it to the root element unless the parent has some position other than `static`. Ideal way to implemet is, make the current postion `absolute` and parent element position as `relative`.

`fixed`: Move to the top, ignores all the parents, stays there even if it is scrolling

`sticky`: With `sticky` position while the parent is relative, the DOM fixed it to the top while scrolling. It is a combination of `fixed` and `relative` position. To implement this, the current element should have `sticky` position and the parent should have `relative` position.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1745591439243/5f0936ae-cb22-4079-a2dd-9a868afda7e7.png align="center")

## `static` vs `relative`

Both align with regular DOM flow; however, unlike `static`, in `relative` We can set the `top`, `bottom`, `left`, `right` and `z-index`.

## `absolute` vs `fixed`

Both ignore the Dom and move to the very top. However, unlike `absolute`The fixed does not scroll.

## Combination of `absolute` and `relative`

`absolute` took the Dom to the very top, unlike there is a parent other than `static`, like `relative`.

## `absolute` vs `translate`

`absoulte` remove the dom and as a reference use the parent element (other than the `static`). However, translate also moves the element but uses itself as a reference. Since, `translate` does not invoke the browser to repaint the DOM, it is more efficient.

## References

1. [The CSS Position Property Explained with Examples (freecodecamp.org)](https://www.freecodecamp.org/news/learn-the-basics-the-css-position-property)
    
2. [Learn CSS Position In 9 Minutes (web-dev simplified](https://www.youtube.com/watch?v=jx5jmI0UlXU))