HTML & CSS Interview Question #81

What is the difference between position: relative and position: absolute?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

A relatively positioned element remains in normal flow, and offsets move its visual position relative to where it would normally be. It can also establish a positioning reference for absolutely positioned descendants.

Detailed Explanation

An absolutely positioned element is removed from normal flow and positioned relative to its containing block, often the nearest ancestor whose position is not static. Because it no longer reserves normal-flow space, surrounding content can overlap it.

Code Example

.card {
    position: relative;
}

.card-badge {
    position: absolute;
    top: .5rem;
    right: .5rem;
}