CSS 定位进阶：Position 属性详解与 Z-Index 层级管理
在网页布局中，元素的位置往往不是简单的线性排列。当我们需要实现弹窗、固定导航栏或者复杂的层叠效果时，CSS 的 position 属性和 z-index 就成了核心工具。很多开发者对'脱流'、'包含块'和'层叠上下文'感到困惑，其实只要理清了底层逻辑，这些难点都能迎刃而解。
Position 五大属性深度解析
Static（静态定位）
这是所有元素的默认值。元素遵循正常的文档流，top、left、right、bottom 以及 z-index 等属性均无效。如果你给一个普通元素设置偏移量，它不会移动，就像没设一样。
Relative（相对定位）
相对定位是微调神器。元素不脱离文档流，仍然占据原有空间，但可以通过 top、left 等属性相对于自身原始位置进行偏移。它的最大价值在于：当一个子元素需要绝对定位时，父元素设为 relative 可以成为该子元素的定位参考系（包含块）。这就是常说的'Parent is relative, child is absolute'。
Absolute（绝对定位）
绝对定位会让元素完全脱离文档流，原位置会被后续元素填补。它的定位基准是最近的、设置了非 static 定位的祖先元素（如 relative、absolute、fixed）。如果找不到这样的祖先，则相对于初始包含块（通常是视口或根元素）定位。
- 应用场景：弹窗、下拉菜单、图标悬浮、表单控件的精确定位。
- 注意：如果父级没有定位，子级绝对定位会直接跑到浏览器窗口里，这往往是新手容易踩的坑。
Fixed（固定定位）
固定定位同样脱离文档流，但它的基准永远是浏览器视口（Viewport）。无论页面怎么滚动，fixed 元素都会固定在屏幕的某个角落。不过要注意，如果祖先元素有 transform 属性，fixed 的定位基准可能会变为该祖先元素。
- 应用场景：固定导航栏、回到顶部按钮、全局遮罩层。
Sticky（粘性定位）
粘性定位是 relative 和 fixed 的结合体。元素在滚动到指定偏移量之前，表现像 relative；一旦滚动到达设定位置（如 top: 0），它就变成 fixed 粘住不动。生效条件比较苛刻：必须设置 top/right/bottom/left 中的至少一个，且父容器不能有 overflow: hidden/auto/scroll（否则会被裁剪导致失效）。
- 应用场景：吸顶导航、列表标题悬浮。
Z-Index 与层叠上下文
z-index 用于控制定位元素的层级顺序，数值越大越靠上。但它有几个关键规则常被忽略：
- 仅对定位元素生效：
static元素设置z-index无效。 - 同层比较：在同一包含块内，数值大的覆盖数值小的；数值相同，后定义的覆盖先定义的。
- 层叠上下文隔离：每个设置了
position且z-index != auto的元素会创建一个新的层叠上下文。子元素的 只能在这个内部生效，无法突破父元素的层级限制。这意味着即使子元素 设得再高，如果父元素层级低，它也无法覆盖外部同级的高层级元素。
