What is Position absolute in CSS?

CSSmarkup~5 mins

Position absolute in CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Position absolute lets you place an element exactly where you want on the page. It helps you move things freely without affecting other parts.

You want to put a button at the bottom right corner of a box.

You need to place a label over an image.

You want a popup message to appear on top of other content.

You want to create a custom tooltip near a word.

You want to layer elements on top of each other.

Syntax

CSS

selector {
  position: absolute;
  top: value;
  right: value;
  bottom: value;
  left: value;
}

Use top, right, bottom, and left to move the element from the edges.

The element moves relative to the nearest parent that has position set to relative, absolute, or fixed. If none, it moves relative to the page.

Examples

This places the div 10 pixels from the top and 20 pixels from the left of its positioned parent or page.

CSS

div {
  position: absolute;
  top: 10px;
  left: 20px;
}

This places the button at the bottom right corner of its positioned parent.

CSS

button {
  position: absolute;
  bottom: 0;
  right: 0;
}

This centers the span exactly in the middle of its positioned parent.

CSS

span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Sample Program

This example shows a blue container box with a smaller dark blue box placed at the top right corner using position: absolute. The container has position: relative so the small box moves relative to it.

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Position Absolute Example</title>
  <style>
    .container {
      position: relative;
      width: 300px;
      height: 200px;
      background-color: #cce5ff;
      border: 2px solid #004085;
      margin: 2rem auto;
      padding: 1rem;
      font-family: Arial, sans-serif;
    }
    .box {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: #004085;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <main>
    <section class="container" aria-label="Blue container with absolute positioned box">
      This is a container box.
      <div class="box" role="note">Top Right</div>
    </section>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Always set position: relative on the parent container to control where the absolute element moves.

Absolute elements are removed from the normal page flow, so they don't take up space and can overlap other content.

Use keyboard and screen reader friendly roles and labels when placing important content absolutely.

Summary

Position absolute lets you place elements exactly where you want inside a container.

It moves relative to the nearest positioned parent or the page if none.

Use top, right, bottom, and left to control the exact spot.