Syllabus

On this page

Position (relative, absolute, fixed, sticky)

Badar KhalilUpdated September 30, 2026 6 min read

CSS Position Property: Relative, Absolute, Fixed and Sticky

Focus keyword: CSS position. The position property lets you take elements out of normal flow or pin them to a spot. It powers badges, tooltips, dropdown menus, sticky headers, modals and overlays. In this lesson you will learn all five values, the offset properties, how the containing block works, and the most common mistakes. All examples are live and editable.

position relative vs absolute, position fixed, position sticky header, inset shorthand, containing block, offset properties top right bottom left, sticky not working, overflow and sticky, CSS tooltip, notification badge, overlay, scroll-margin-top, CSS anchor positioning, dvh units, position center.

1. The Five Position Values

static (default): normal flow. Offsets and z-index do not work.
relative: stays in flow, and can be nudged with offsets. Its original space is kept.
absolute: removed from flow and placed relative to its nearest positioned ancestor.
fixed: removed from flow and placed relative to the viewport. It stays in place while scrolling.
sticky: behaves like relative until a scroll threshold is reached, then sticks like fixed inside its scroll container.

2. Offset Properties: top, right, bottom, left and inset

Offsets only work on positioned elements (anything except static). The shorthand inset sets all four at once: inset: 0 means top, right, bottom and left are all 0. Logical versions exist too: inset-block and inset-inline, which adapt to writing direction.

3. position: relative

With relative, top: 20px moves the element 20px down from where it would normally be, without affecting neighbours. Its most common job is not to move anything, but to act as the anchor (containing block) for absolute children. That is why you often see position: relative with no offsets.

4. position: absolute

Takes no space in the normal flow, so siblings move up to fill the gap.
Positions itself against the nearest ancestor whose position is not static. If there is none, it uses the initial containing block (the page).
Without width or offsets, it shrinks to fit its content.
With inset: 0 it stretches to fill its containing block, perfect for overlays and background layers.
Typical uses: badges, close buttons, tooltips, dropdown panels, image captions.

5. position: fixed

Fixed elements are positioned against the viewport, so they do not move on scroll. Use it for top bars, floating action buttons, cookie banners and modals. Notes: a fixed element is removed from flow, so add padding or margin to the page content to avoid overlap. If any ancestor has transform, filter or perspective, fixed positioning is calculated from that ancestor instead of the viewport. On mobile use 100dvh instead of 100vh for full-height layers because browser toolbars change the visible height.

6. position: sticky

Sticky needs a threshold such as top: 0. The element scrolls normally until it reaches that offset, then stays there until its parent ends. Sticky is ideal for table headers, sidebars, section titles and table of contents.

Why sticky is not working

No top, bottom, left or right value is set.
An ancestor has overflow: hidden, auto or scroll, which becomes the scroll container. (Use overflow: clip instead of hidden when you only want clipping.)
The parent is exactly as tall as the sticky element, so there is no room to stick.
In a flex container, the item stretches to full height. Add align-self: start.

7. Containing Block Cheat Sheet

relative: itself (for its offsets)
absolute: nearest positioned ancestor (padding box)
fixed: viewport (unless a transformed ancestor exists)
sticky: nearest scrolling ancestor

8. Anchored Headers and scroll-margin-top

When you have a sticky or fixed header, links to #section may scroll content under it. Fix it with scroll-margin-top on the target, for example section { scroll-margin-top: 80px; }.

9. The New CSS Anchor Positioning

Modern browsers are adding CSS anchor positioning (anchor-name, position-anchor and anchor()) so tooltips and popovers can attach to any element without JavaScript or a relative parent. Check browser support and keep a fallback. The HTML popover attribute and dialog element pair well with it.

10. Accessibility Notes

Positioned elements can change visual order, but keyboard order follows the HTML. Keep them in sync.
Do not cover focused elements with sticky or fixed bars.
Make sure overlays can be closed with the Escape key.

11. Common Mistakes

Using absolute without a positioned parent, so the element flies to the page corner.
Forgetting that absolute and fixed elements do not add height to the parent.
Using top and bottom offsets on static elements.
Sticky headers that never stick because of an overflow ancestor.
Positioning entire page layouts with absolute instead of grid or flexbox.

Key Takeaways

Relative keeps flow and creates an anchor, absolute pins to that anchor, fixed pins to the viewport, sticky switches between relative and fixed based on scroll. Use inset for short code and prefer flex and grid for page layout.

Try it Yourself HTML

<style>
  body { font: 18px system-ui, sans-serif; padding: 16px; }
  .wrap { border: 2px dashed #888; padding: 10px; margin-bottom: 16px; }
  .box { width: 100px; height: 50px; background: #2a9d8f; color: #fff; padding: 4px; }
  .rel { position: relative; top: 15px; left: 30px; background: #e76f51; }
</style>
<div class='wrap'>
  <div class='box'>Static</div>
  <div class='box rel'>Relative (moved 15px down, 30px right)</div>
  <div class='box'>Static (space of relative box is still kept)</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 18px system-ui, sans-serif; padding: 24px; }
  .card { position: relative; width: 260px; padding: 20px; border: 1px solid #ccc; border-radius: 12px; }
  .badge { position: absolute; top: -10px; right: -10px; background: #e63946; color: #fff; font-size: 14px; padding: 4px 10px; border-radius: 999px; }
  .close { position: absolute; inset: 8px 8px auto auto; border: 0; background: none; font-size: 20px; cursor: pointer; }
</style>
<div class='card'>
  <span class='badge'>New</span>
  <button class='close' aria-label='Close'>x</button>
  <h3>Product card</h3>
  <p>The badge and close button are absolute, the card is relative.</p>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 18px system-ui, sans-serif; padding: 40px; }
  .tip { position: relative; display: inline-block; border-bottom: 1px dotted #333; cursor: help; }
  .tip::after {
    content: attr(data-tip);
    position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
    background: #222; color: #fff; font-size: 14px; padding: 6px 10px; border-radius: 6px;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .tip:hover::after, .tip:focus-visible::after { opacity: 1; }
</style>
<p>Hover or focus this word: <span class='tip' tabindex='0' data-tip='Cascading Style Sheets'>CSS</span></p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font: 18px/1.6 system-ui, sans-serif; padding-top: 60px; }
  header { position: fixed; inset: 0 0 auto 0; height: 60px; background: #264653; color: #fff; display: flex; align-items: center; padding: 0 20px; z-index: 10; }
  main { padding: 20px; height: 1500px; }
  .fab { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; border: 0; background: #e76f51; color: #fff; font-size: 24px; }
</style>
<header>Fixed header (stays on scroll)</header>
<main><p>Scroll this preview down. The header and the round button stay in place.</p></main>
<button class='fab' aria-label='Add'>+</button>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 18px/1.6 system-ui, sans-serif; margin: 0; }
  .scroll { height: 240px; overflow: auto; border: 2px solid #264653; }
  h3 { position: sticky; top: 0; margin: 0; padding: 10px; background: #e9c46a; }
  p { padding: 0 10px; height: 120px; }
</style>
<div class='scroll'>
  <h3>Section A</h3><p>Scroll inside this box. Each title sticks to the top.</p>
  <h3>Section B</h3><p>More content here.</p>
  <h3>Section C</h3><p>More content here.</p>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font: 18px system-ui, sans-serif; padding: 16px; }
  .hero { position: relative; height: 200px; background: linear-gradient(135deg, #8ecae6, #219ebc); border-radius: 12px; overflow: hidden; }
  .hero::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
  .hero h2 { position: absolute; inset: auto 20px 20px 20px; margin: 0; color: #fff; }
</style>
<div class='hero'><h2>Overlay text on top of a hero</h2></div>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

const positions = {
  static: 'normal flow, offsets ignored',
  relative: 'normal flow, offsets move it visually',
  absolute: 'out of flow, relative to nearest positioned ancestor',
  fixed: 'out of flow, relative to viewport',
  sticky: 'relative until threshold, then fixed inside scroll container'
};

Object.keys(positions).forEach(function (key) {
  console.log(key + ': ' + positions[key]);
});

Output

Press Run to execute.

Exercise: Place a Badge on a CardHTML

Make the SALE badge sit in the top right corner of the card, half outside the edge. Decide which element needs position relative and which needs position absolute.

Try it Yourself HTML

<style>
  .card { width: 240px; padding: 20px; border: 1px solid #ccc; }
  .badge { background: red; color: white; padding: 4px 10px; }
</style>
<div class='card'><span class='badge'>SALE</span><p>Headphones</p></div>

Output

Press Run to execute.

Show expected output

Card is position relative, badge is position absolute with negative top and right offsets

This is a self-check — compare your result with the expected output above.

Exercise: Create a Sticky Table HeaderHTML

Make the table header stay visible while the list scrolls inside the 200px tall container. Remember to set a top value and a solid background.

Try it Yourself HTML

<style>
  .box { height: 200px; overflow: auto; }
  th { background: #eee; }
</style>
<div class='box'><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>A</td><td>1</td></tr><tr><td>B</td><td>2</td></tr><tr><td>C</td><td>3</td></tr><tr><td>D</td><td>4</td></tr><tr><td>E</td><td>5</td></tr><tr><td>F</td><td>6</td></tr><tr><td>G</td><td>7</td></tr><tr><td>H</td><td>8</td></tr></tbody></table></div>

Output

Press Run to execute.

Show expected output

th uses position: sticky with top: 0 and a solid background

This is a self-check — compare your result with the expected output above.

Was this page helpful?

CSS Position Property: Relative, Absolute, Fixed and Sticky

Trending keywords covered in this lesson

1. The Five Position Values

2. Offset Properties: top, right, bottom, left and inset

3. position: relative

4. position: absolute

5. position: fixed

6. position: sticky

Why sticky is not working

7. Containing Block Cheat Sheet

8. Anchored Headers and scroll-margin-top

9. The New CSS Anchor Positioning

10. Accessibility Notes

11. Common Mistakes

Key Takeaways