CSS: position

The position property changes how an element is placed and how offsets such as top and left affect it.

What you will learn

How relative, absolute, fixed, and sticky differ
How a positioned ancestor becomes a reference for an absolute child
Why z-index and overflow can affect the result

Minimal example

<div class="card">
  <span class="badge">New</span>
  <h2>Product</h2>
</div>

.card { position: relative; }
.badge {
  position: absolute;
  top: .5rem;
  right: .5rem;
}
.site-header { position: sticky; top: 0; }

The nearest positioned ancestor is the reference for an absolutely positioned child. A sticky element needs an offset such as top and a scroll context where it can stick.

Common mistakes

Do not use absolute positioning for the whole page layout when normal flow, Flexbox, or Grid is clearer.
Remember that absolute elements leave normal flow, so they can overlap other content.
Use a visible focus state and test fixed or sticky elements at zoom and on small screens.