CSS top Property

Definition and Usage

The top property sets the vertical inset of a positioned element. It has no effect when position is static (the default).

With absolute or fixed, top is the distance from the containing block’s top edge. With relative, it moves the element down from its normal place. With sticky, it helps define the sticky constraint.

CSS Syntax

Percentages refer to the height of the containing block. Negative lengths move the element upward.

Property Values

How to Use top

Position the element first. Then set how far its top edge should move.

1. Set position to relative, absolute, fixed, or sticky.
2. For absolute children, give a parent position: relative (or another non-static value) so the containing block is clear.
3. Add top with a length, percentage, or auto.
4. Pair with left, right, or bottom when you need the other edges too.

Live Preview

Absolute box inside a relative parent. Change only top.

CSS Examples

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

<style>
  .parent {
    position: relative;
  }

  .box {
    position: absolute;
    top: 20px;
  }
</style>

<div class="parent">
  <div class="box">Box</div>
</div>

<style>
  .box {
    position: relative;
    top: 20px;
  }
</style>

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

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

<div class="bar">Sticky bar</div>
<p>Scroll content…</p>

Key Takeaways