CSS works with boundaries called normal flow . Elements stack on top of each other moving from top down, in the order in which elements appears in your HTML.

Types of Positioning

CSS offers 5 position properties:

1. static
2. relative
3. absolute
4. fixed
5. inherit

They can be split into two categories:

• Static-type positioning - static
• Relative-type positioning - relative, absolute, fixed

Each property is used for specific purposes.

TL;DR

Position	Normal flow	Offset properties	Relative to
Static	✔️	❌	❌
Relative	✔️	✔️	Itself
Absolute	❌	✔️	Nearest parent
Fixed	❌	✔️	Viewport

Static-type Positioning

position: static

• Default position value of an element
• Single-column layout, stack on top of each other like a tower
• Cons: Cannot use offset properties: top, left, right, bottom

Relative-type Positioning

position: relative

• Behave exactly like static elements
• Elements are still in the flow of document (element still takes up space)
• Pros:

1. Able to adjust elements using offset properties: top, left, right, bottom

2. Create reference point for offset properties (coordinate system)

position: absolute

• Elements are removed from normal flow (elements do not take up space)
• Placed anywhere without affecting other elements in the flow
• Pros:

1. Respond to offset properties for positioning

2. Create new coordinate system for child elements Offset coordinates are in respect to each parent element

position: fixed

• Similar to absolute element, but browser window (viewport) positions fixed elements
• Does not scroll with document => element stays fixed in place

position: inherit

• Element inherits value from parent element

---

Illustration by Murat Kalkavan from Icons8

See Also

• https://ishadeed.com/article/learn-css-positioning (Really cute explanations using cat illustrations!)
• https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning
• https://alistapart.com/article/css-positioning-101/
• https://medium.com/@jacobgreenaway12/taming-the-css-beast-master-positioning-5882bad14458
• https://www.internetingishard.com/html-and-css/advanced-positioning/