定位：relative、absolute、fixed、sticky、z-index

用 CSS 定位和一套管理良好的 z-index 层级，把徽章、页头和弹窗精确锚定在你想要的位置。

8 分钟 · 3 题

默认情况下，每个元素都是 position: static，跟随文档流。position: relative 有两个用途：在不打扰相邻元素的情况下轻微挪动一个元素，尤其是作为参照，供带有 position: absolute 的子元素使用。这是最常见的定位模式：一枚促销徽章、一个提示气泡，或者锚定在父元素某个角落的图标。

.product-card {
  position: relative;
}

.promo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

position: fixed 会把元素钉在视口上，无论如何滚动都不动：cookie 提示条、返回顶部按钮。position: sticky 是一种混合模式：元素先随页面正常滚动，然后一旦到达你设定的阈值就锁定不动（例如 top: 0）。这是让页头保持可见的现代方案。

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

当元素重叠时，z-index 决定哪个位于上层——但仅对已定位的元素有效。要采用一套有文档记录的层级，而不是随意取值：下拉菜单用 10，页头用 100，弹窗用 1000。要注意：一个自身创建了层叠上下文的父元素（例如 opacity 小于 1）会封住它所有子元素的 z-index。

.dropdown {
  z-index: 10;
}

.site-header {
  z-index: 100;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

知识检测

确认你已牢记本课的重点内容。

1. 一个 position: absolute 元素相对于什么来定位？
   • 始终相对于浏览器窗口
   • 相对于最近的已定位祖先，否则相对于视口
   • 相对于它的直接父元素，无论父元素的定位如何
2. fixed 和 sticky 有什么区别？
   • fixed 始终钉在屏幕上，sticky 只在滚动到某个阈值之后才锁定不动
   • sticky 比 fixed 渲染得更快
   • 没有区别，它们是同义词
3. 为什么 z-index: 999 可能没有任何效果？
   • 因为允许的最大值是 100
   • 因为该元素未被定位，或被困在一个更低的层叠上下文中
   • 因为 z-index 只对 Grid 有效