Static, Relative, Absolute, Fixed and Sticky

What Is It?

Position controls how an element is placed. Static is normal flow; relative keeps its space; absolute and fixed remove it from normal flow; sticky combines flow with a scroll threshold.

Properties, Tags and Attributes Explained

• position: relative: Can offset a box and establish a containing block for absolute children.
• position: absolute: Uses its containing block for inset offsets, often the nearest positioned ancestor.
• position: fixed: Usually positions relative to the viewport; certain ancestors such as transformed elements can change the containing block.
• position: sticky: Sticks at an inset within its scrolling context and containing block.
• top / right / inset: Set offsets for positioned boxes.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Corner badge

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Static, Relative, Absolute, Fixed and Sticky</title>
  <style>
    .card { position: relative; padding: 32px 16px 16px; border: 1px solid #94a3b8; }
    .badge { position: absolute; top: 6px; right: 6px; background: #fef08a; padding: 4px; }
  </style>
</head>
<body>
  <div class="card"><span class="badge">New</span><p>CSS course</p></div>
</body>
</html>

What you see: The badge sits in the card upper right corner.

Example 2: Sticky heading

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Static, Relative, Absolute, Fixed and Sticky</title>
  <style>
    .scroll { height: 140px; overflow: auto; }
    h3 { position: sticky; top: 0; background: #dbeafe; margin: 0; padding: 8px; }
    p { padding: 12px; }
  </style>
</head>
<body>
  <div class="scroll"><h3>Lesson notes</h3><p>Scroll this panel.</p><p>Practice a small example.</p><p>Change one property.</p><p>Review the result.</p></div>
</body>
</html>

What you see: The heading stays at the top while you scroll its panel.

When and Where to Use It

Use absolute positioning for a badge inside a card, sticky for section headers, and fixed for a persistent viewport control.

Common Mistake or Useful Tip

A sticky element needs an inset such as top: 0 and enough scrolling space to move.

Try It Yourself

Move the badge to the bottom right and reserve space so it does not overlap text.