CSS top Property

What You’ll Learn

The top property controls vertical offset for positioned elements — essential for layouts using absolute, relative, fixed, and sticky positioning.

Introduction

The top property in CSS is used to specify the vertical position of a positioned element. This property works in conjunction with position values such as absolute, relative, fixed, or sticky.

By setting the top property, you can control the distance between the top edge of the element and the top edge of its containing element.

Definition and Usage

Use top when you need precise vertical placement — for example, placing a badge inside a card, pinning a navbar with position: fixed; top: 0;, or nudging an element with position: relative.

📝 Syntax

The syntax for the top property is straightforward and can be applied to any positioned element.

element {
  position: position-value;
  top: value;
}

Here, position-value can be absolute, relative, fixed, or sticky, and value can be a length (e.g., px, em), a percentage (%), or other valid CSS units.

Basic Example

.box {
  position: absolute;
  top: 50px;
}

Syntax Rules

• Requires position other than static.
• Positive values move the element down from the top edge of its containing block.
• Negative values move the element upward.
• Percentages are relative to the height of the containing block.
• The property is not inherited.

Related Properties

• position — enables offset properties like top
• left, right, bottom — other inset offset properties
• inset — shorthand for top, right, bottom, and left
• z-index — controls stacking order of positioned elements

🎯 Default Value

The default value of the top property is auto, which means the browser will calculate the top position of the element.

💎 Property Values

The top property accepts length, percentage, and keyword values.

When to Use top

top is essential whenever you need vertical control in positioned layouts:

• Overlays and badges — Place elements inside cards with position: absolute; top: ...
• Fixed headers — Keep navigation at the viewport top with top: 0
• Sticky sections — Define when sticky elements stick using a top threshold
• Micro-adjustments — Nudge icons or labels with position: relative; top: -2px;

Examples Gallery

In this example, we’ll position a box 50 pixels from the top of its containing element using the top property with position: absolute.

<style>
  .container {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: lightgray;
  }
  .box {
    position: absolute;
    top: 50px;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>

<div class="container">
  <div class="box"></div>
</div>

.icon {
  position: relative;
  top: -3px;
}

.toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: #1e293b;
  color: #fff;
}

.section-title {
  position: sticky;
  top: 0;
  background: #eff6ff;
  padding: 0.5rem;
}

♿ Accessibility

• Fixed headers — Ensure fixed top bars do not hide focused content; add padding to the page body.
• Keyboard focus — Offsets should not move focusable elements off-screen unexpectedly.
• Zoom and mobile — Test that fixed top: 0 bars remain usable at larger text sizes.
• Motion sensitivity — Sticky behavior is generally fine, but avoid layout jumps that disorient users.

top requires position

The offset properties top, right, bottom, and left only apply when position is relative, absolute, fixed, or sticky.

.parent { position: relative; }
.child {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

💡 Best Practices