Absolute

Definition

Removes an element completely from the normal document flow. It is positioned relative to its closest positioned ancestor (not necessarily the viewport).

Explain Like I'm New

The element is ripped out of the HTML document entirely, like picking up a sticker. The elements below it instantly slide up to fill the empty space. You can then stick that element anywhere on the screen using coordinates.

Real World Example

A red notification badge (like '3 new messages') sitting in the top-right corner of a profile picture.

Common Use Cases

•Tooltips
•Dropdown menus
•Notification badges
•Overlay modals

Interactive Example

Interview Questions

basic

If an element is `position: absolute`, what happens to the elements below it?

intermediate

How does an absolute element decide where `top: 0` is?

Flash Cards

Question

Elements below it?

Click to reveal answer

Answer

They ignore it completely. They slide up as if the absolute element was deleted from the HTML code.

Question

Where is top 0?

Click to reveal answer

Answer

It looks UP the HTML tree for the first parent element that has `position: relative`. If it finds one, `top: 0` means 'The top of that parent'. If it finds nothing, it goes all the way up to the `<body>` and `top: 0` means 'The top of the entire webpage'.