CSS Position: sticky, fixed, absolute, relative

Q: Can I use position: sticky for horizontal scrolling?

Yes, sticky positioning works on both axes. For horizontal scrolling, use left instead of top. For example, a sticky first column in a horizontally scrollable table can be achieved with position: sticky and left: 0 on the first column cells. The same overflow restrictions apply — the horizontally scrollable container should not have overflow: hidden on any ancestor in the relevant axis.

Q: How do I center an absolutely positioned element?

The modern approach is to use inset: 0 with margin: auto. Set position: absolute, then inset: 0 (shorthand for top: 0, right: 0, bottom: 0, left: 0), and finally margin: auto. The element must have explicit width and height. Alternatively, use top: 50% and left: 50% with transform: translate(-50%, -50%), which works without knowing the element's dimensions.

The CSS position property is fundamental to every web layout. It determines how an element is placed in the document and how it interacts with surrounding elements. Understanding css position sticky, fixed, absolute, and relative is essential for building navbars, modals, tooltips, and scroll-aware UI. This comprehensive guide covers all five position values with practical code examples, common patterns, and debugging tips.

Build layouts visually with our Flexbox Generator →

Convert CSS units with our CSS Unit Converter →

position: static — The Default

Every element starts with position: static. Static elements follow the normal document flow and are placed in the order they appear in the HTML. The properties top, right, bottom, left, and z-index have no effect on statically positioned elements.

/* position: static is the default — no need to declare */
.element {
  position: static;

  /* These have NO effect on static elements: */
  top: 10px;      /* ignored */
  left: 20px;     /* ignored */
  z-index: 100;   /* ignored */
}

/* When to use static explicitly: */
.override-positioned {
  position: static;  /* reset a previously set position */
}

/* Example: element in normal flow */
.box-a { background: #3b82f6; height: 80px; }
.box-b { background: #10b981; height: 80px; }
.box-c { background: #f59e0b; height: 80px; }
/* Result: three boxes stacked vertically in source order */

Since static is the default, you only need to declare it explicitly when overriding another position value.

position: relative — Offset from Normal Position

A relatively positioned element still occupies its original space in the document flow, but you can offset it visually using top, right, bottom, and left. The element is shifted relative to where it would have been. Importantly, position: relative creates a new stacking context for z-index and serves as the positioning reference for any absolutely positioned descendants.

Key characteristics:

Remains in normal document flow (space is reserved)
Offset with top/right/bottom/left is relative to its original position
Creates a containing block for absolute children
Creates a stacking context when z-index is set

/* Offset an element from its normal position */
.shifted {
  position: relative;
  top: 20px;     /* moves DOWN 20px from original position */
  left: 30px;    /* moves RIGHT 30px from original position */
}

/* The element's original space is still reserved in the flow.
   Surrounding elements do NOT move to fill the gap. */

/* Common use: create positioning context for absolute children */
.parent {
  position: relative;  /* becomes anchor for .child */
}
.child {
  position: absolute;
  top: 0;
  right: 0;           /* positioned at parent's top-right corner */
}

/* Common use: adjust z-index stacking */
.card {
  position: relative;
  z-index: 1;         /* now participates in z-index stacking */
}
.card:hover {
  z-index: 10;        /* bring to front on hover */
}

position: absolute — Removed from Flow

An absolutely positioned element is completely removed from the normal document flow — other elements act as if it does not exist. It is positioned relative to its nearest positioned ancestor (any ancestor with position other than static). If no positioned ancestor exists, it positions relative to the initial containing block (the <html> element).

Key characteristics:

Removed from normal flow (no space is reserved)
Positioned relative to nearest positioned ancestor
Can use top/right/bottom/left and z-index
Width shrinks to fit content (no longer block-level stretching)
Setting both left and right (or top and bottom) stretches the element

/* Basic absolute positioning */
.parent {
  position: relative;   /* creates containing block */
  width: 400px;
  height: 300px;
}

.child {
  position: absolute;
  top: 10px;            /* 10px from parent's top edge */
  right: 10px;          /* 10px from parent's right edge */
  width: 100px;
  height: 50px;
}

/* Stretch to fill parent */
.overlay {
  position: absolute;
  inset: 0;             /* same as top:0; right:0; bottom:0; left:0 */
  /* Element fills entire parent */
}

/* Center absolutely positioned element */
.centered {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}

/* Alternative centering with transform */
.centered-alt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Pin to corners */
.top-left     { position: absolute; top: 0; left: 0; }
.top-right    { position: absolute; top: 0; right: 0; }
.bottom-left  { position: absolute; bottom: 0; left: 0; }
.bottom-right { position: absolute; bottom: 0; right: 0; }

position: fixed — Relative to Viewport

A fixed element is removed from the normal document flow and positioned relative to the viewport (the browser window). It stays in the same place even when the page is scrolled. This makes it ideal for persistent UI elements like navbars, floating action buttons, and cookie banners.

Key characteristics:

Removed from normal flow
Positioned relative to the viewport
Stays in place during scrolling
Width shrinks to fit content
Caution: a transform, filter, or perspective on an ancestor creates a new containing block, breaking fixed positioning

/* Fixed navbar at top */
.fixed-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;              /* or width: 100% */
  height: 64px;
  background: #1e293b;
  z-index: 1000;
}

/* IMPORTANT: add padding to body so content isn't hidden behind navbar */
body {
  padding-top: 64px;
}

/* Fixed floating action button (FAB) */
.fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #3b82f6;
  z-index: 900;
}

/* Fixed back-to-top button */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  opacity: 0;
  transition: opacity 0.3s;
}
.back-to-top.visible {
  opacity: 1;
}

/* Fixed cookie banner at bottom */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: #1e293b;
  z-index: 1000;
}

position: sticky — Hybrid Relative + Fixed

Sticky positioning is a hybrid between relative and fixed. The element behaves as position: relative until it crosses a specified scroll threshold (defined by top, bottom, left, or right), at which point it becomes position: fixed — but only within its containing block. This is the most powerful and commonly used approach for css position sticky headers and sidebars.

Key characteristics:

Stays in normal flow until scroll threshold is reached
Requires at least one of top, right, bottom, or left to be set
Sticks within its parent container bounds (stops at parent edge)
Creates a stacking context
Will not work if any ancestor has overflow: hidden, scroll, or auto

/* Basic sticky element */
.sticky-element {
  position: sticky;
  top: 0;               /* sticks when top edge reaches viewport top */
}

/* Sticky with offset */
.sticky-below-navbar {
  position: sticky;
  top: 64px;            /* sticks 64px from top (below a fixed navbar) */
}

/* Sticky bottom */
.sticky-footer-bar {
  position: sticky;
  bottom: 0;            /* sticks when bottom edge reaches viewport bottom */
}

/* Sticky table header */
table thead th {
  position: sticky;
  top: 0;
  background: #1e293b;  /* background needed to cover scrolling content */
  z-index: 10;
}

/* Sticky section headers (like iOS-style grouped lists) */
.section-header {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  padding: 8px 16px;
  font-weight: 700;
}
/* Each section header pushes the previous one away as you scroll */

Comparison Table — All 5 Position Values

Here is a quick reference comparing all CSS position values:

Property	In Flow?	Reference Point	Scroll Behavior	z-index	Common Use Case
`static`	Yes	N/A	Scrolls with page	No effect	Default for all elements
`relative`	Yes (space preserved)	Own original position	Scrolls with page	Works	Offset, z-index parent, anchor for absolute
`absolute`	No	Nearest positioned ancestor	Scrolls with positioned parent	Works	Tooltips, dropdowns, badges
`fixed`	No	Viewport	Stays fixed on screen	Works	Navbars, FABs, cookie banners
`sticky`	Yes (until stuck)	Scrollport / parent container	Scrolls then sticks	Works	Sticky headers, sticky sidebars

Stacking Context and z-index

The z-index property controls the stacking order of positioned elements (any position except static). However, z-index only works within the same stacking context. A stacking context is created by several CSS properties:

position: relative/absolute/fixed/sticky with a z-index value other than auto
opacity less than 1
transform, filter, perspective, clip-path, mask
isolation: isolate (explicitly creates a new context)
will-change with a value that creates a stacking context

/* z-index only works on positioned elements */
.element {
  position: relative;   /* or absolute, fixed, sticky */
  z-index: 10;          /* now this element stacks above z-index: 5 siblings */
}

/* Stacking context example — child can NEVER escape parent's context */
.parent-a {
  position: relative;
  z-index: 1;           /* creates stacking context */
}
.parent-a .child {
  position: relative;
  z-index: 9999;        /* still behind .parent-b if parent-b has z-index: 2 */
}
.parent-b {
  position: relative;
  z-index: 2;           /* parent-b and all children are above parent-a */
}

Use isolation: isolate to create a stacking context boundary without any visual side effects. This is the cleanest way to contain z-index wars:

/* isolation: isolate — cleanest way to create stacking context */
.component {
  isolation: isolate;   /* creates new stacking context */
}

/* Now z-index inside .component is scoped — cannot leak out */
.component .dropdown {
  position: absolute;
  z-index: 10;          /* only competes with siblings inside .component */
}

/* Real-world example: card with overlapping elements */
.card {
  position: relative;
  isolation: isolate;   /* contain z-index to this card */
}
.card .badge {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 1;           /* safe — won't interfere with other cards */
}
.card .image {
  position: relative;
  z-index: 0;
}

Sticky Header Pattern — CSS-Only Navbar

A sticky header is one of the most common uses of position: sticky. The navbar scrolls normally with the page until it reaches the top, then sticks in place:

/* CSS-only sticky navbar */
.navbar {
  position: sticky;
  top: 0;                /* sticks when scrolled to top edge */
  z-index: 100;          /* stay above page content */
  background: #1e293b;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Optional: shadow appears only when stuck */
  box-shadow: none;
  transition: box-shadow 0.2s;
}

/* HTML structure:
   <header class="navbar">
     <div class="logo">Logo</div>
     <nav>
       <a href="#">Home</a>
       <a href="#">About</a>
       <a href="#">Contact</a>
     </nav>
   </header>
   <main>
     ... long scrollable content ...
   </main>
*/

/* Add shadow when scrolled (using IntersectionObserver or scroll sentinel) */
/* CSS-only approach with a sentinel element: */
.scroll-sentinel {
  position: absolute;
  top: 0;
  height: 1px;
  width: 100%;
}

/* With JavaScript — add class when scrolled: */
/* navbar.classList.toggle('scrolled', window.scrollY > 0); */
.navbar.scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Transparent-to-solid navbar on scroll */
.navbar-transparent {
  position: sticky;
  top: 0;
  background: transparent;
  transition: background 0.3s;
}
.navbar-transparent.scrolled {
  background: #1e293b;
}

The top: 0 value is required — it tells the browser the scroll threshold where the element should stick. Without it, sticky positioning will not activate.

Sticky Sidebar — Scrolls Then Sticks

A sticky sidebar scrolls with the main content but sticks when it reaches the top of the viewport. It stops sticking when it reaches the bottom of its parent container:

/* Sticky sidebar layout */
.layout {
  display: flex;
  align-items: flex-start;  /* IMPORTANT: prevents sidebar from stretching */
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
}

.main-content {
  flex: 1;
  min-width: 0;            /* prevent overflow */
}

.sidebar {
  position: sticky;
  top: 80px;               /* stick 80px from top (below navbar) */
  width: 280px;
  flex-shrink: 0;
  max-height: calc(100vh - 100px);  /* prevent sidebar from exceeding viewport */
  overflow-y: auto;        /* scroll if sidebar content is tall */
}

/* HTML structure:
   <div class="layout">
     <main class="main-content">
       ... long article content ...
     </main>
     <aside class="sidebar">
       <nav class="toc">Table of Contents</nav>
       <div class="ads">Sidebar Ads</div>
     </aside>
   </div>
*/

/* Sticky sidebar with table of contents */
.toc {
  position: sticky;
  top: 80px;
  padding: 16px;
  border-left: 2px solid #3b82f6;
}

.toc a {
  display: block;
  padding: 4px 0;
  color: #94a3b8;
  text-decoration: none;
}

.toc a.active {
  color: #3b82f6;
  font-weight: 600;
}

The sidebar stops being sticky when the bottom of the .layout container is reached. This is automatic — sticky elements are constrained to their parent.

Fixed Modal / Overlay Pattern

Modals and overlays use position: fixed to cover the entire viewport. The backdrop stays in place while the page may be scrolled underneath:

/* Fixed modal overlay */
.modal-backdrop {
  position: fixed;
  inset: 0;                /* covers entire viewport */
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: #1e293b;
  border-radius: 12px;
  padding: 32px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;      /* for close button positioning */
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 24px;
  cursor: pointer;
}

/* HTML structure:
   <div class="modal-backdrop">
     <div class="modal">
       <button class="modal-close">&times;</button>
       <h2>Modal Title</h2>
       <p>Modal content...</p>
     </div>
   </div>
*/

/* Animation for modal appearance */
.modal-backdrop {
  opacity: 0;
  transition: opacity 0.2s;
}
.modal-backdrop.active {
  opacity: 1;
}

.modal {
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s;
}
.modal-backdrop.active .modal {
  transform: scale(1) translateY(0);
}

Scroll lock: When a modal is open, add overflow: hidden to the body to prevent background scrolling:

/* Scroll lock when modal is open */
body.modal-open {
  overflow: hidden;        /* prevent background scrolling */
}

/* Better scroll lock that preserves scroll position */
body.modal-open {
  overflow: hidden;
  position: fixed;         /* prevents iOS Safari bounce */
  width: 100%;
  top: calc(-1 * var(--scroll-y, 0px));
}

/* JavaScript to save and restore scroll position:
   // On open:
   document.documentElement.style.setProperty('--scroll-y', window.scrollY + 'px');
   document.body.classList.add('modal-open');

   // On close:
   document.body.classList.remove('modal-open');
   window.scrollTo(0, parseInt(getComputedStyle(document.documentElement)
     .getPropertyValue('--scroll-y')));
*/

Absolute Positioning Patterns

Absolute positioning is essential for layered UI elements like tooltips, dropdowns, and notification badges. The key is always having a positioned parent (position: relative) as the anchor.

Tooltip

/* Tooltip using absolute positioning */
.tooltip-wrapper {
  position: relative;      /* anchor for tooltip */
  display: inline-block;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);  /* 8px above the element */
  left: 50%;
  transform: translateX(-50%);  /* center horizontally */
  padding: 8px 12px;
  background: #1e293b;
  color: #f8fafc;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Arrow */
.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1e293b;
}

/* Show on hover */
.tooltip-wrapper:hover .tooltip {
  opacity: 1;
}

/* Tooltip positions */
.tooltip.top    { bottom: calc(100% + 8px); top: auto; }
.tooltip.bottom { top: calc(100% + 8px); bottom: auto; }
.tooltip.left   { right: calc(100% + 8px); left: auto; top: 50%; transform: translateY(-50%); }
.tooltip.right  { left: calc(100% + 8px); right: auto; top: 50%; transform: translateY(-50%); }

Dropdown Menu

/* Dropdown menu */
.dropdown {
  position: relative;      /* anchor for dropdown menu */
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;               /* directly below trigger */
  left: 0;
  min-width: 200px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  color: #e2e8f0;
  text-decoration: none;
}

.dropdown-menu a:hover {
  background: #334155;
}

/* Right-aligned dropdown */
.dropdown-menu.right {
  left: auto;
  right: 0;
}

Badge on Avatar

/* Badge on avatar */
.avatar-wrapper {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 48px;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  background: #ef4444;
  color: white;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 2px solid #0f172a;  /* border matches background */
}

/* Status indicator (online/offline dot) */
.status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #0f172a;
}
.status-dot.online  { background: #22c55e; }
.status-dot.offline { background: #6b7280; }
.status-dot.busy    { background: #ef4444; }

/* Corner ribbon on a card */
.card {
  position: relative;
  overflow: hidden;
}
.ribbon {
  position: absolute;
  top: 16px;
  right: -30px;
  transform: rotate(45deg);
  background: #3b82f6;
  color: white;
  padding: 4px 40px;
  font-size: 12px;
  font-weight: 700;
}

Common Bugs and Fixes

CSS positioning has several well-known gotchas. Here are the most common issues and their solutions:

Sticky Not Working

The most common reason position: sticky fails is an ancestor with overflow: hidden, overflow: auto, or overflow: scroll. Sticky elements need an uninterrupted overflow chain to the scrollport.

/* PROBLEM: sticky not working */
.page-wrapper {
  overflow: hidden;         /* THIS breaks sticky! */
}
.page-wrapper .sticky-nav {
  position: sticky;
  top: 0;                   /* will NOT stick */
}

/* FIX 1: remove overflow: hidden from ancestors */
.page-wrapper {
  overflow: visible;        /* or just remove the overflow property */
}

/* FIX 2: if overflow is needed for layout, restructure HTML */
/* Move sticky element outside the overflow container: */
/*
  <nav class="sticky-nav">...</nav>     <!-- outside -->
  <div class="page-wrapper overflow-hidden">
    ... content ...
  </div>
*/

/* FIX 3: use overflow: clip instead (modern browsers) */
.page-wrapper {
  overflow: clip;           /* clips like hidden but doesn't break sticky */
}

/* CHECKLIST for debugging sticky: */
/* 1. Is top/bottom/left/right set?                    */
/* 2. Any ancestor with overflow: hidden/auto/scroll?  */
/* 3. Does the parent have enough height?              */
/* 4. Is the sticky element's height == parent height? */

z-index Wars

Increasing z-index to absurd values (z-index: 9999999) is a sign of stacking context confusion. The fix is to understand which stacking context each element belongs to.

/* PROBLEM: z-index: 9999 and it's still behind */
.modal    { z-index: 9999; }  /* still behind .dropdown?! */
.dropdown { z-index: 99999; } /* arms race! */

/* ROOT CAUSE: elements are in different stacking contexts */
.sidebar {
  position: relative;
  z-index: 1;               /* creates stacking context */
}
.sidebar .dropdown {
  z-index: 99999;           /* trapped inside sidebar's context */
}
.main {
  position: relative;
  z-index: 2;               /* main is above sidebar's ENTIRE context */
}

/* FIX: establish a clear z-index scale */
:root {
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-modal-backdrop: 400;
  --z-modal:    500;
  --z-tooltip:  600;
  --z-toast:    700;
}

/* FIX: use isolation: isolate to scope z-index */
.component {
  isolation: isolate;       /* z-index inside won't leak out */
}

Fixed Element Not Fixed

If a fixed element scrolls with the page, check if any ancestor has transform, filter, or perspective. These properties create a new containing block, causing position: fixed to behave like position: absolute.

/* PROBLEM: fixed element scrolls with the page */
.animated-parent {
  transform: scale(1);      /* THIS breaks fixed children! */
}
.animated-parent .fixed-toolbar {
  position: fixed;
  top: 0;                   /* behaves like absolute, not fixed */
}

/* Other properties that break fixed: */
.parent {
  filter: blur(0);          /* breaks fixed */
  perspective: 1000px;      /* breaks fixed */
  backdrop-filter: blur(5px); /* breaks fixed */
  will-change: transform;   /* breaks fixed */
  contain: paint;           /* breaks fixed */
}

/* FIX: move fixed element outside the transformed ancestor */
/*
  <div class="animated-parent">
    ... content ...
  </div>
  <div class="fixed-toolbar">   <!-- move outside -->
    ... toolbar ...
  </div>
*/

/* FIX: if you must keep the structure, use a portal (React/Vue) */

Absolute Element Clipped

If your absolutely positioned element is clipped or hidden, check the parent for overflow: hidden. The absolute element is contained within the nearest positioned ancestor, and if that ancestor clips overflow, the element will be hidden.

/* PROBLEM: dropdown menu is clipped by parent */
.card {
  position: relative;
  overflow: hidden;         /* clips the dropdown! */
}
.card .dropdown-menu {
  position: absolute;
  top: 100%;                /* extends outside .card — gets clipped */
}

/* FIX 1: remove overflow: hidden if possible */
.card {
  overflow: visible;
}

/* FIX 2: use a portal to render dropdown outside the parent DOM */

/* FIX 3: use position: fixed instead of absolute for the dropdown */
.card .dropdown-menu {
  position: fixed;          /* now relative to viewport, not clipped */
  /* Calculate position with JavaScript */
}

Frequently Asked Questions

Why is my position: sticky not working?

The most common cause is an ancestor element with overflow: hidden, overflow: auto, or overflow: scroll. Sticky positioning requires an uninterrupted scrollable overflow from the element to the scroll container (usually the viewport). Also ensure you have set a threshold value like top: 0 — without it, the browser does not know when to activate the sticky behavior. Additionally, check that the sticky element's parent has enough height for it to actually scroll within.

What is the difference between position: fixed and position: sticky?

Fixed elements are always positioned relative to the viewport and stay in place during scrolling. Sticky elements start in the normal flow and only become fixed when a scroll threshold is crossed (e.g., top: 0). Critically, sticky elements are constrained to their parent container — they stop being sticky when the parent scrolls out of view. Fixed elements have no such constraint and remain on screen permanently.

How does z-index work with positioned elements?

z-index only works on positioned elements (relative, absolute, fixed, or sticky — NOT static). Elements with a higher z-index appear on top of elements with a lower z-index, but only within the same stacking context. A stacking context is created by certain CSS properties like position with z-index, opacity < 1, transform, and filter. An element can never appear above another element in a higher stacking context, regardless of its z-index value.

Can I use position: sticky for horizontal scrolling?

Yes, sticky positioning works on both axes. For horizontal scrolling, use left instead of top. For example, a sticky first column in a horizontally scrollable table can be achieved with position: sticky and left: 0 on the first column cells. The same overflow restrictions apply — the horizontally scrollable container should not have overflow: hidden on any ancestor in the relevant axis.

How do I center an absolutely positioned element?

The modern approach is to use inset: 0 with margin: auto. Set position: absolute, then inset: 0 (shorthand for top: 0, right: 0, bottom: 0, left: 0), and finally margin: auto. The element must have explicit width and height. Alternatively, use top: 50% and left: 50% with transform: translate(-50%, -50%), which works without knowing the element's dimensions.

Understanding CSS position values is critical for building any non-trivial web layout. Master these five values — static, relative, absolute, fixed, and sticky — and you can build navbars, modals, tooltips, sticky sidebars, and any layered UI with confidence. Use the tools below to experiment with layouts interactively.

Build layouts with our Flexbox Generator →

Convert CSS units with our CSS Unit Converter →

CSS Position: sticky, fixed, absolute, relative

position: static — The Default

position: relative — Offset from Normal Position

position: absolute — Removed from Flow

position: fixed — Relative to Viewport

position: sticky — Hybrid Relative + Fixed

Comparison Table — All 5 Position Values

Stacking Context and z-index

Sticky Header Pattern — CSS-Only Navbar

Sticky Sidebar — Scrolls Then Sticks

Fixed Modal / Overlay Pattern

Absolute Positioning Patterns

Tooltip

Dropdown Menu

Badge on Avatar

Common Bugs and Fixes

Sticky Not Working

z-index Wars

Fixed Element Not Fixed

Absolute Element Clipped

Frequently Asked Questions

Why is my position: sticky not working?

What is the difference between position: fixed and position: sticky?

How does z-index work with positioned elements?

Can I use position: sticky for horizontal scrolling?

How do I center an absolutely positioned element?

최신 소식 받기

Try These Related Tools

Related Articles

CSS Flexbox 치트시트: 모든 속성을 예제로 설명

CSS Grid 레이아웃 치트시트