布局体系分为两大核心：流式排布与层级定位。Flex、Grid、浮动解决页面常规二维平铺布局，而定位（position）负责元素脱离文档流、精准偏移、层级叠加、悬浮固定。
现代网页的角标悬浮、弹窗遮罩、固定导航、吸顶标题、悬浮按钮，全部依赖定位体系实现。掌握五种定位模式的参照物规则、文档流特性、层级逻辑，是从会写样式到精准可控布局的分水岭。
本文承接上篇《CSS盒模型｜标准盒与怪异盒模型，布局底层基石》，系统性、工程化拆解五大定位模式、z-index层级机制、开发选型规范与高频踩坑点。
一、定位核心原理概述
CSS定位用于打破默认文档流排布规则，自定义元素位置与堆叠层级。普通布局只能上下左右平铺，定位可以实现自由叠加、悬浮、固定、吸附效果。
定位体系包含五种模式，每一种都拥有独立的参照物与文档流特性：
static 静态定位：默认文档流状态，无定位效果
relative 相对定位：自身偏移、保占位、不脱离文档流
absolute 绝对定位：父级参照、脱流叠加、精准布局核心
fixed 固定定位：视口参照、全局悬浮固定
sticky 粘性定位：滚动吸附、状态切换型定位
定位生效条件：开启position属性后，top / left / right / bottom / z-index方可生效。
二、static 静态定位（默认状态）
所有元素默认处于 static 状态，遵循标准普通文档流，无任何特殊定位能力，偏移属性无效。
.box { position: static; }
工程用途：仅用于重置清除已有定位，业务开发几乎不主动书写。
三、relative 相对定位（参照自身、保占位）
相对定位是微调型定位，以元素原始默认位置为参照，视觉偏移但保留原始文档流占位，不脱离标准流，不会挤压周围元素。
.box { position: relative; top: 10px; left: 10px; }
核心特性总结
参照物：元素自身原始位置
文档流：不脱离、保留占位
层级：可使用z-index提升层级
工程核心价值：为绝对定位子元素提供参照父级（父相子绝），是页面叠加布局的基石。
四、absolute 绝对定位（布局叠加核心）
绝对定位是项目使用频率最高的定位方式，完全脱离文档流、无占位、可自由叠加，实现模块内部精准悬浮布局。
参照规则（重中之重）
绝对定位寻找最近一级已定位祖先元素作为参照物：
父级/祖先存在 relative / absolute / fixed / sticky → 参照最近父级
所有祖先无定位 → 默认参照浏览器视口
.father { position: relative; /* 父级开启定位，作为参照容器 */ } .son { position: absolute; top: 0; right: 0; }
核心特性
完全脱离文档流，不占空间，周围元素自动补位
支持四边偏移，可精准贴边、居中、对角定位
天然支持层级叠加，用于角标、浮层、遮罩、图文叠加
经典场景：卡片角标、弹窗内容层、图片文字叠加、表单悬浮提示、局部悬浮按钮。
五、fixed 固定定位（全局悬浮）
固定定位永久参照浏览器可视视口，不受父级、滚动影响，页面滚动时元素位置恒定不变。
.fixed-bar { position: fixed; top: 0; left: 0; width: 100%; }
核心特性
无视所有父级定位，只认窗口
完全脱离文档流
页面滚动始终固定
经典场景：顶部固定导航、底部操作栏、悬浮回到顶部、全局客服按钮、固定侧边栏。
六、sticky 粘性定位（滚动吸附）
粘性定位是相对定位与固定定位的结合体，常态占位、滚动吸附，是现代页面分类标题吸顶的最优解。
.title { position: sticky; top: 0; }
状态切换机制
未滚动到阈值：表现为 relative，正常占位
滚动超出阈值：切换为 fixed，悬浮吸顶
经典场景：列表分类标题、通讯录字母索引、瀑布流吸顶栏。
七、z-index 层级堆叠规则
定位元素默认开启层级堆叠能力，通过 z-index 控制上下覆盖顺序。
仅对定位元素生效（static 无效）
数值越大层级越高，支持正负整数
存在层级父子桎梏规则：父级层级低，子级再高也无法覆盖外部高层级兄弟
.layer { position: absolute; z-index: 999; }
八、五大定位工程选型标准（企业规范）
普通页面布局：默认 static，无需定位
元素微调、搭建参照容器：relative（绝不单独做悬浮）
模块内部叠加、角标、浮层：absolute + 父相子绝
全局固定悬浮组件：fixed
滚动吸顶、粘性标题：sticky
九、开发高频避坑总结
relative 不脱流，适合做参照，不适合做叠加层
absolute 必须保证有定位父级，否则全局乱跑
fixed 脱离文档流容易遮挡下方内容，需预留padding
sticky 生效依赖父级滚动区域与阈值设置
z-index 层级混乱优先排查父级堆叠上下文，而非单纯加大数值