CSS Position：sticky、fixed、absolute、relative

Q: 可以用 position: sticky 实现水平滚动吗？

可以，粘性定位在两个轴上都有效。对于水平滚动，使用 left 代替 top。例如，在水平可滚动的表格中实现粘性第一列，可以在第一列单元格上设置 position: sticky 和 left: 0。同样的 overflow 限制也适用 — 水平可滚动容器的祖先在相关轴上不应有 overflow: hidden。

Q: 如何居中一个绝对定位的元素？

现代方法是使用 inset: 0 配合 margin: auto。设置 position: absolute，然后 inset: 0（是 top: 0, right: 0, bottom: 0, left: 0 的简写），最后 margin: auto。元素必须有明确的宽度和高度。或者使用 top: 50% 和 left: 50% 配合 transform: translate(-50%, -50%)，这种方法不需要知道元素的尺寸。

CSS position 属性是所有网页布局的基础。它决定了元素在文档中的放置方式以及与周围元素的交互方式。理解 css position sticky、fixed、absolute 和 relative 对于构建导航栏、模态框、工具提示和滚动感知 UI 至关重要。本完整指南涵盖所有五个 position 值，包含实用代码示例、常见模式和调试技巧。

使用我们的 Flexbox 生成器可视化构建布局 →

使用我们的 CSS 单位转换器转换 CSS 单位 →

position: static — 默认值

每个元素默认都是 position: static。静态元素遵循正常的文档流，按照 HTML 中的顺序排列。top、right、bottom、left 和 z-index 属性对静态定位的元素没有效果。

/* 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 */

由于 static 是默认值，只有在覆盖其他 position 值时才需要显式声明。

position: relative — 相对原位偏移

相对定位的元素仍然占据其在文档流中的原始空间，但你可以通过 top、right、bottom 和 left 进行视觉偏移。元素相对于它本来应该在的位置进行偏移。重要的是，position: relative 会创建新的层叠上下文（用于 z-index），并作为绝对定位子元素的定位参考。

关键特性：

保留在正常文档流中（空间被保留）
通过 top/right/bottom/left 偏移是相对于原始位置
为绝对定位的子元素创建包含块
设置 z-index 时创建层叠上下文

/* 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 — 脱离文档流

绝对定位的元素完全脱离正常文档流 — 其他元素会表现得好像它不存在一样。它相对于最近的已定位祖先（任何 position 不是 static 的祖先）进行定位。如果没有已定位的祖先，它将相对于初始包含块（<html> 元素）进行定位。

关键特性：

脱离正常文档流（不保留空间）
相对于最近的已定位祖先进行定位
可以使用 top/right/bottom/left 和 z-index
宽度收缩以适应内容（不再是块级拉伸）
同时设置 left 和 right（或 top 和 bottom）可以拉伸元素

/* 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 — 相对于视口

固定定位的元素脱离正常文档流，相对于视口（浏览器窗口）进行定位。即使页面滚动，它也保持在同一位置。非常适合持久性 UI 元素，如导航栏、悬浮操作按钮和 Cookie 横幅。

关键特性：

脱离正常文档流
相对于视口定位
滚动时保持固定
宽度收缩以适应内容
注意：祖先元素的 transform、filter 或 perspective 会创建新的包含块，破坏固定定位

/* 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 — 相对与固定的混合体

粘性定位是相对定位和固定定位的混合体。元素表现为 position: relative，直到它越过指定的滚动阈值（由 top、bottom、left 或 right 定义），此时它变为 position: fixed — 但仅在其包含块内有效。这是实现 css position sticky 头部和侧边栏最强大且最常用的方法。

关键特性：

在达到滚动阈值之前保持在正常文档流中
必须设置 top、right、bottom 或 left 中的至少一个
在父容器范围内粘附（到达父边缘时停止）
创建层叠上下文
如果任何祖先元素有 overflow: hidden、scroll 或 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 */

对比表 — 所有 5 种 Position 值

以下是所有 CSS position 值的快速参考对比：

属性	在文档流中？	参考点	滚动行为	z-index	常见用途
`static`	是	不适用	随页面滚动	无效果	所有元素的默认值
`relative`	是（保留空间）	自身原始位置	随页面滚动	有效	偏移、z-index 父级、absolute 锚点
`absolute`	否	最近的已定位祖先	随已定位父级滚动	有效	工具提示、下拉菜单、徽章
`fixed`	否	视口	固定在屏幕上	有效	导航栏、悬浮按钮、Cookie 横幅
`sticky`	是（粘附前）	滚动容器 / 父容器	先滚动后粘附	有效	粘性头部、粘性侧边栏

层叠上下文与 z-index

z-index 属性控制已定位元素（除 static 外的任何 position）的堆叠顺序。然而，z-index 只在同一个层叠上下文中起作用。层叠上下文由以下 CSS 属性创建：

position: relative/absolute/fixed/sticky 配合非 auto 的 z-index 值
opacity 小于 1
transform、filter、perspective、clip-path、mask
isolation: isolate（显式创建新上下文）
will-change 设置为会创建层叠上下文的值

/* 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 */
}

使用 isolation: isolate 创建层叠上下文边界，且不会产生任何视觉副作用。这是解决 z-index 冲突最干净的方式：

/* 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;
}

粘性头部模式 — 纯 CSS 导航栏

粘性头部是 position: sticky 最常见的用途之一。导航栏随页面正常滚动，直到到达顶部后就固定在原位：

/* 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;
}

top: 0 值是必需的 — 它告诉浏览器元素应该粘附的滚动阈值。没有它，粘性定位不会激活。

粘性侧边栏 — 滚动后粘附

粘性侧边栏随主要内容滚动，但在到达视口顶部时粘附。当它到达父容器底部时停止粘附：

/* 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;
}

当 .layout 容器的底部被到达时，侧边栏停止粘附。这是自动的 — 粘性元素受其父容器约束。

固定模态框 / 遮罩层模式

模态框和遮罩层使用 position: fixed 覆盖整个视口。背景层保持固定，而页面可能在下方滚动：

/* 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);
}

滚动锁定：当模态框打开时，给 body 添加 overflow: hidden 以防止背景滚动：

/* 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')));
*/

绝对定位模式

绝对定位对于分层 UI 元素如工具提示、下拉菜单和通知徽章至关重要。关键是始终有一个已定位的父元素（position: relative）作为锚点。

工具提示

/* 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 {
  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 */
.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;
}

常见问题与修复

CSS 定位有几个众所周知的陷阱。以下是最常见的问题及其解决方案：

Sticky 不生效

position: sticky 失效最常见的原因是祖先元素有 overflow: hidden、overflow: auto 或 overflow: scroll。粘性元素需要到滚动容器的不间断溢出链。

/* 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 大战

将 z-index 增加到荒谬的值（z-index: 9999999）是层叠上下文混乱的表现。解决方法是理解每个元素属于哪个层叠上下文。

/* 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 */
}

固定元素不固定

如果固定元素随页面滚动，检查是否有祖先元素设置了 transform、filter 或 perspective。这些属性会创建新的包含块，导致 position: fixed 表现得像 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) */

绝对定位元素被裁切

如果绝对定位的元素被裁切或隐藏，检查父元素是否有 overflow: 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 */
}

常见问题

为什么我的 position: sticky 不生效？

最常见的原因是祖先元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll。粘性定位需要从元素到滚动容器（通常是视口）的不间断可滚动溢出。同时确保设置了阈值如 top: 0 — 没有它，浏览器不知道何时激活粘性行为。另外，检查粘性元素的父元素是否有足够的高度让它实际滚动。

position: fixed 和 position: sticky 有什么区别？

固定元素始终相对于视口定位，在滚动期间保持不动。粘性元素从正常文档流开始，只有在越过滚动阈值时（如 top: 0）才变为固定。关键是，粘性元素受其父容器约束 — 当父元素滚出视图时停止粘附。固定元素没有这种约束，会永久留在屏幕上。

z-index 如何与定位元素配合工作？

z-index 只对已定位元素有效（relative、absolute、fixed 或 sticky — 不包括 static）。z-index 值较高的元素显示在较低值元素的上方，但仅在同一层叠上下文中。层叠上下文由某些 CSS 属性创建，如带 z-index 的 position、opacity < 1、transform 和 filter。无论 z-index 值多大，元素都无法显示在更高层叠上下文中的元素之上。

可以用 position: sticky 实现水平滚动吗？

可以，粘性定位在两个轴上都有效。对于水平滚动，使用 left 代替 top。例如，在水平可滚动的表格中实现粘性第一列，可以在第一列单元格上设置 position: sticky 和 left: 0。同样的 overflow 限制也适用 — 水平可滚动容器的祖先在相关轴上不应有 overflow: hidden。

如何居中一个绝对定位的元素？

现代方法是使用 inset: 0 配合 margin: auto。设置 position: absolute，然后 inset: 0（是 top: 0, right: 0, bottom: 0, left: 0 的简写），最后 margin: auto。元素必须有明确的宽度和高度。或者使用 top: 50% 和 left: 50% 配合 transform: translate(-50%, -50%)，这种方法不需要知道元素的尺寸。

理解 CSS position 值对于构建任何复杂的网页布局都至关重要。掌握这五个值 — static、relative、absolute、fixed 和 sticky — 你就能自信地构建导航栏、模态框、工具提示、粘性侧边栏以及任何分层 UI。使用下面的工具来交互式地实验布局。

使用我们的 Flexbox 生成器构建布局 →

使用我们的 CSS 单位转换器转换单位 →

CSS Position：sticky、fixed、absolute、relative

position: static — 默认值

position: relative — 相对原位偏移

position: absolute — 脱离文档流

position: fixed — 相对于视口

position: sticky — 相对与固定的混合体

对比表 — 所有 5 种 Position 值

层叠上下文与 z-index

粘性头部模式 — 纯 CSS 导航栏

粘性侧边栏 — 滚动后粘附

固定模态框 / 遮罩层模式

绝对定位模式

工具提示

下拉菜单

头像徽章

常见问题与修复

Sticky 不生效

z-index 大战

固定元素不固定

绝对定位元素被裁切

常见问题

为什么我的 position: sticky 不生效？

position: fixed 和 position: sticky 有什么区别？

z-index 如何与定位元素配合工作？

可以用 position: sticky 实现水平滚动吗？

如何居中一个绝对定位的元素？

保持更新

试试这些相关工具

相关文章

CSS Flexbox 速查表：每个属性都有示例详解

CSS Grid 布局速查表