Position Utilities

Definition

Utilities for controlling how an element is positioned in the DOM, mapping to `static`, `fixed`, `absolute`, `relative`, and `sticky`.

Explain Like I'm New

How elements stick to the screen. - `relative`: Normal, but acts as a prison for `absolute` children. - `absolute`: Breaks free of normal flow, positions itself relative to the nearest `relative` parent. - `fixed`: Breaks free completely, sticks to the screen even when you scroll. - `sticky`: Acts normal until you scroll past it, then it sticks to the top.

Real World Example

Creating a sticky Navbar that stays at the top of the screen as you scroll down the page.

Common Use Cases

•Navbars
•Modals
•Tooltips
•Floating Action Buttons

Interactive Example

Interview Questions

basic

What position class is required on a parent element if you want to place an `absolute` child exactly in its top-right corner?

intermediate

What is the difference between `fixed` and `absolute`?

Flash Cards

Question

Parent class?

Click to reveal answer

Answer

`relative`. If the parent isn't relative, the absolute child will escape and position itself relative to the entire webpage.

Question

Fixed vs Absolute?

Click to reveal answer

Answer

`absolute` positions itself relative to its nearest positioned ancestor. `fixed` positions itself relative to the browser window/viewport (it ignores all parents).