4.2 Position定位体系

Position 定位体系

本节摘要：当元素需要"飞"到页面的精确位置——弹窗覆盖在内容上方、导航栏吸在顶部、角标贴在卡片右上角——position 属性就是工具箱里那把钥匙。它让元素脱离正常文档流，按不同的参照物（自身原位、已定位祖先、视口、滚动阈值）重新安放，再配合 z-index 裁定层叠顺序。

学习目标

完成本节后，你将能够：区分 static、relative、absolute、fixed、sticky 五种定位模式；理解包含块的概念，避免"定位跑偏"的经典错误；实现弹窗遮罩、粘性表头、返回顶部按钮等常见组件；用 z-index 管理层叠顺序。

五种定位模式

static：默认值

所有元素默认 position: static，按照正常文档流排列。此时 top、right、bottom、left 和 z-index 属性都不生效。你几乎不需要显式写 position: static，除非要"撤销"之前某个样式设置的定位——比如插件给元素加了 relative，你想让它回到普通流。

relative：相对定位

relative 让元素相对于自己的原始位置偏移，但原始位置仍然被占据——其他元素不会"填上来"。

.badge {
  position: relative;
  top: -10px;   /* 向上偏移 10px，但原来的空间还在 */
  left: 5px;
}
​

动手验证"原位保留"：给一个段落设 position: relative; top: -20px，它视觉上上移了，但后面的段落没有跟上来填补——原地留下一个看不见的坑。这个特性让 relative 只适合做小幅微调（比如让图标和文字基线对齐），大幅移动会留下难看的空洞。

relative 的另一个关键作用远比偏移重要：它可以作为 absolute 子元素的定位参考点。这是它在本节出镜率最高的用法——很多页面上写满 position: relative 的元素，偏移量一行都没有，它们只是在"举手"：我的绝对定位孩子以我为参照。

absolute：绝对定位

absolute 把元素从正常文档流中完全移除，然后相对于最近的已定位祖先元素进行定位。"已定位"指的是祖先的 position 不是 static。如果没有这样的祖先，就相对于初始包含块（可近似理解为整个页面）。

/* 父元素设为 relative，作为定位参考 */
.card {
  position: relative;
  width: 300px;
  height: 200px;
}

/* 标签定位在卡片右上角 */
.card-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #F44336;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}
​

absolute 元素相对于 relative 祖先定位，且不占文档流位置

absolute 元素不再占据空间，后面的元素会"顶上来"。这是弹窗、下拉菜单、工具提示等覆盖式界面的基础原理——覆盖物不该挤开内容。

绝对定位还有个实用副产品：居中一件脱离文档流的东西。top: 50%; left: 50% 把元素左上角放到容器中心，再用 transform: translate(-50%, -50%) 往回撤自身的一半，实现真正的居中（百分比平移参照的是元素自身尺寸）：

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
​

fixed：固定定位

fixed 让元素相对于浏览器视口定位——不管页面怎么滚动，元素的位置始终不变。

/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 40px;
  height: 40px;
  background: #1976D2;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* 顶部固定导航栏 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 100;
}
​

使用 fixed 时要注意：被固定的元素脱离了文档流，不会为后面的内容"腾出空间"。如果顶部有一个 60px 高的固定导航栏，你需要给 body 加上 padding-top: 60px，否则导航栏会遮住页面顶部的内容。这个"遮住正文"的现象是 fixed 最常见的事故现场。

另一个隐患：祖先元素如果有 transform、filter 之类的属性，fixed 的参照物会从视口变成那个祖先——页面里"莫名其妙的 fixed"九成与它有关。排查时沿祖先链找这些属性。

sticky：粘性定位

sticky 是 relative 和 fixed 的混合体。元素在滚动到某个阈值之前是 relative，到达阈值后变成 fixed。

/* 粘性表头 */
.table-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

/* 粘性侧边栏：距顶部 80px 时粘住 */
.sidebar {
  position: sticky;
  top: 80px;
  align-self: flex-start;
}
​

sticky 元素只在它的滚动容器内有效——当它的父元素滚出视口时，sticky 元素也会跟着消失。这解释了最常见的"sticky 失效"原因：你想吸顶的元素正好是父容器里最后一个较高的元素，父容器滚完它就到头了；或者忘了写 top 值——没有阈值的 sticky 就是一个普通 relative。

z-index 层叠顺序

当多个定位元素重叠时，z-index 控制谁在上面。值越大越靠上，可以是负数。

.overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 101;  /* 在遮罩层之上 */
}
​

z-index 只在定位元素（position 不是 static）上生效。在一个 Flex 或 Grid 容器中，子元素的 z-index 也可以生效，即使它们没有显式设置 position——这是弹性布局送的小福利。

真正让人头疼的不是单个 z-index，而是"我明明设了 9999 为什么还在下面"。原因通常是层叠上下文：某个定位元素如果同时有透明度小于 1、transform、filter 等属性，会创建一个新的层叠王国，王国里子元素的 z-index 再大也只在本王国比拼，出不了国门跟外面的元素比。遇到这种问题，检查重叠双方的祖先链上有没有这些"建国属性"。

工程上建议用分层约定代替漫天要价：遮罩类 90 档、弹窗 100 档、全局提示 110 档，用十位间隔留出插层余地，别让 999999 大战 9999999 出现在你的代码里。

动手做：一个完整的弹窗组件

把本节知识拼成实战里高频出现的组合——遮罩加弹窗加关闭按钮：

<div class="overlay">
  <div class="modal">
    <button class="modal-close">×</button>
    <h3>确认删除？</h3>
    <p>此操作不可撤销。</p>
  </div>
</div>
​

/* 遮罩：fixed 铺满视口，半透明压暗背景 */
.overlay {
  position: fixed;
  inset: 0;                    /* top right bottom left 全 0 的简写 */
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

/* 弹窗：absolute 相对遮罩，translate 实现真居中 */
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  padding: 24px;
  background: white;
  border-radius: 8px;
  z-index: 101;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* 关闭按钮：absolute 贴弹窗右上角 */
.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: #F5F5F5;
  border-radius: 50%;
  cursor: pointer;
}
​

三层结构各有讲究：遮罩用 fixed 加 inset: 0（四边全零的简写）钉在视口上；弹窗用 absolute 挂在遮罩里居中——遮罩天然铺满视口，所以相对它定位等价于相对视口，还免去了 fixed 的嵌套麻烦；关闭按钮再嵌一层 absolute，贴在弹窗右上角。祖孙三代各用一次定位，参照物层层递进，这是定位体系的典型日常。

对照检查后做个"找参照物"实验：把 .modal 的 position: absolute 改成 fixed——效果几乎不变（因为遮罩就是满视口的）；但把 .overlay 改成 position: absolute，滚动页面时遮罩会跟着文档走，长页面里弹窗就"飞"出视口了。参照物是谁，行为就跟着谁。

💡 动手建议：尝试用 position: absolute 在个人主页的作品卡片右上角放一个"NEW"角标（第 2 章用伪元素画过，这次用真实元素再实现一次，对比两种方案的取舍）；再给主页的留言表头加上 position: sticky; top: 0，然后拖动滚动条体验粘性表头。

⚠️ absolute 元素的包含块是最近的"已定位祖先"（position 不是 static 的祖先），不一定是直接父元素。如果中间隔了好几层 static 的 div，absolute 元素会一直往上找到第一个 relative/absolute/fixed 的祖先。"忘记给直接父元素加 position: relative"是初学者最常犯的定位错误——角标飞到页面右上角去了，八成就是它。

包含块：定位跑偏的总根源

五种定位模式的差异，本质上是"参照物"的差异，而这个参照物有个正式名字——包含块。relative 的包含块是元素自己的原始位置；absolute 的包含块是最近的已定位祖先（没有则回退到初始包含块）；fixed 的包含块正常情况下是视口；sticky 的包含块是最近的滚动容器。理解了这张"参照物对照表"，任何"定位飞了"的问题都能按图索骥。

值得单独展开的是 absolute 的寻找过程：浏览器从目标元素出发向上爬祖先链，逐个检查 position 是否为非 static 值，找到的第一个就是包含块；一路爬到顶都没找到，就用初始包含块（可视作整个页面）。这意味着中间隔多少层 static 的容器都无所谓——你在卡片里放的角标，命中的参照物可能是好几层之外某个恰好设了 relative 的祖先，于是"贴角"贴到了别的元素上。排查这类问题的手法很机械：从元素向上逐层看 computed 面板里的 position 值，第一个非 static 的就是真凶或恩人。

另一个高频细节：absolute 元素的百分比尺寸参照的也是包含块。width: 100% 的绝对定位子元素会撑满它的已定位祖先，而不是血缘上的父元素——这与普通流的百分比参照不同，也是"全屏遮罩里嵌套内容"这类结构的理论依据。

常见疑问解答

问：sticky 到底什么时候生效、什么时候"失效"？ 三个前提缺一不可：写了阈值（top 等偏移值）；父容器还没滚出视口；没有祖先把它"关起来"——祖先若设定了 overflow 为非 visible 值，滚动容器就变成了那个祖先，吸顶参照系整个换了。遇到"sticky 不粘"，按这三条顺序查，几乎必中其一。

问：fixed 元素在滚动的父容器里不动了，怎么回事？ 祖先链上有元素设置了 transform、filter、will-change 之类属性，fixed 的包含块就从视口变成了那个祖先。这是规范行为不是浏览器 bug。解法要么把固定元素挪出那个祖先（提到 body 下），要么去掉祖先上的"建国属性"。

问：绝对定位的元素为什么要配 position: relative 的父亲？ 因为 relative 是"开销最小"的已定位状态——不脱离文档流、不加偏移就什么也不改变，纯粹举手充当参照物。用 absolute 当参照当然也行，但它会脱离文档流，牵动整个布局。所以"父 relative 子 absolute"成了成本最低的黄金组合。

问：z-index 设了很大还是被盖住？ 沿两条线索查：对方或自己是否在某个"层叠上下文"里（祖先带透明度、transform 等），王国之间的比较看的是建国祖先的 z-index；双方是否都是定位元素或弹性项目——static 元素的 z-index 无效。理解层叠上下文后你会发现，管理层级最好的策略不是堆数值，而是让相关元素处在同一个上下文里公平比拼。

定位的克制使用原则

定位的能力越大，越要克制。一个健康的页面里，绝大多数元素应该待在文档流中由普通排版安置，定位只用于真正的"脱队需求"——覆盖、贴角、吸顶、随滚动固定。判断标准：如果这个元素"即便不定位、只是位置略不理想"，那应该去调边距和布局属性，而不是定位；只有"它必须出现在某个与文档流无关的坐标上"，才轮到 position 出场。

克制的理由很实际：每个脱离文档流的元素都是布局系统的"例外"，例外需要专门记账——弹窗要补滚动锁定、固定导航要补占位、绝对定位要保证参照物稳定。例外三五处时一切可控，满页都是定位时，任何一次结构改动都会引发连锁错位，那是维护成本的无底洞。

团队协作上还可以约定"定位的注释纪律"：每个 position: absolute 附近，注释写明它锚定于哪个祖先、为什么必须脱流。三个月后接手的人（包括你自己）看到注释就能安心，看不到注释就要花一小时重推渲染逻辑。布局代码的可维护性，一半来自结构，一半来自这类小小的纪律。

本节要点回顾

• 五种模式一张表：static 是默认、relative 原位偏移还占坑、absolute 挂靠已定位祖先、fixed 钉死视口、sticky 到阈值切换。
• relative 的真正使命：多数时候不是偏移，而是给 absolute 当参照物。
• absolute 三连：父 relative、子 absolute、坐标贴边——角标、下拉、气泡的通用公式。
• fixed 记得补位：脱离文档流的固定导航会遮住正文，用 padding 补偿；祖先有 transform 时参照物会变。
• sticky 两个前提：必须写 top 阈值，且只在父容器范围内粘。
• z-index 分层约定：定位元素才生效，提防层叠上下文把你的 9999 关在王国里。

下一节回到 CSS 的"古典时代"——浮动。它曾撑起整个互联网的布局，如今退居图文环绕一隅，但看懂它依然是维护存量代码的必修课。