CSS position Property

Definition and Usage

The position property sets how an element is placed in the document. Pair it with inset offsets such as top, left, or inset.

static is normal flow. relative offsets from that spot but keeps the original space. absolute and fixed leave the flow. sticky sticks after a scroll threshold. Anything except static is a positioned element.

CSS Syntax

Offsets apply after you leave static. Without an inset, sticky behaves like relative on that axis.

Property Values

How to Use position

Pick the mode first, then add the inset that matches that mode.

1. Leave static when normal document flow is enough.
2. Use relative for a small nudge, or to create a containing block for absolute children.
3. Use absolute / fixed for overlays and pinned UI, with top / left (or inset).
4. Use sticky with a threshold such as top: 0 inside a scrolling container.

Live Preview

Same box and top: 24px; left: 24px. Change only position. Scroll the panel for sticky.

CSS Examples

Each snippet focuses on position. Use Try It Yourself for a live editor.

<style>
  .box {
    position: relative;
    top: 16px;
    left: 24px;
  }
</style>

<p>Above</p>
<div class="box">Box</div>
<p>Below</p>

<style>
  .parent {
    position: relative;
  }

  .badge {
    position: absolute;
    top: 8px;
    right: 8px;
  }
</style>

<div class="parent">
  Card content
  <span class="badge">New</span>
</div>

<style>
  .panel {
    height: 140px;
    overflow: auto;
  }

  .stick {
    position: sticky;
    top: 0;
  }
</style>

<div class="panel">
  <div class="stick">Sticky</div>
  <p>Scroll me.</p>
  <p>More text.</p>
  <p>Keep going.</p>
</div>

Key Takeaways