CSS position Property

What You’ll Learn

The position property controls how elements are placed on the page. It is one of the most important CSS properties for badges, overlays, navbars, and scroll-based UI.

Introduction

The position property in CSS specifies the type of positioning method used for an element.

This property allows you to control the layout and positioning of elements on a web page, giving you flexibility in designing complex and responsive layouts. Understanding how to use the position property effectively is essential for creating well-structured web pages.

Definition and Usage

Most page content uses the default static positioning. Switch to relative when you need a small visual nudge or when you want to create a positioning context for children.

Use absolute for badges and overlays inside a card, fixed for navbars and floating action buttons, and sticky for headings that should stay visible while scrolling a section.

📝 Syntax

The syntax for the position property is as follows:

element {
  position: value;
}

Here, value can be one of several keywords that define the positioning behavior of the element.

Basic Example

.badge-wrapper {
  position: relative;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

Syntax Rules

• static is the default and follows normal document flow.
• relative offsets an element but keeps its original space reserved.
• absolute is positioned against the nearest non-static ancestor.
• fixed is positioned relative to the browser viewport.
• sticky needs a scroll threshold such as top: 0.
• Combine with z-index when layers overlap.

🎯 Default Value

The default value of the position property is static. This means that the element is positioned according to the normal flow of the document.

💎 Property Values

When Does position Matter?

position is the right tool when normal flow is not enough:

• Product badges — Place a “Sale” label in the corner with absolute.
• Site navigation — Keep a header visible with fixed.
• Section headings — Stick chapter titles with sticky.
• Minor adjustments — Nudge icons or labels with relative.

For full-page layout grids, also learn Flexbox and Grid. Position solves targeted placement problems inside those layouts.

Examples Gallery

Start with the reference overview, then practice relative offsets, absolute badges, and fixed or sticky UI patterns.

<style>
  .static { position: static; }
  .relative { position: relative; top: 20px; }
  .absolute { position: absolute; top: 50px; left: 50px; }
  .fixed { position: fixed; bottom: 0; }
  .sticky { position: sticky; top: 0; }
</style>

<style>
  .shifted {
    position: relative;
    top: 20px;
    left: 30px;
  }
</style>

<style>
  .card { position: relative; }
  .badge {
    position: absolute;
    top: 12px;
    right: 12px;
  }
</style>

<style>
  nav { position: fixed; top: 0; }
  .section-title {
    position: sticky;
    top: 52px;
  }
</style>

position and offset properties

Positioned elements use top, right, bottom, and left to set placement. z-index controls stacking when elements overlap.

pointer-events is often combined with absolutely positioned overlays so decorative layers do not block clicks.

.card {
  position: relative;
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

💡 Best Practices