position属性需配合top/right/bottom/left生效，常用值为static（默认，不脱离文档流）、relative（相对自身偏移）、absolute（相对于最近已定位祖先）、fixed（相对于视口固定）、sticky（滚动触发的条件定位）；z-index仅对非static定位元素有效，且受层叠上下文影响。
position 属性的取值和含义
设置元素定位方式，核心是 position 属性。它不单独起作用，必须配合 top、right、bottom、left 才能真正控制位置。
常见取值有五个，但实际高频使用的是四个：
-
static：默认值，元素按文档流排列，top/left等偏移属性完全无效 -
relative：相对自身原本位置偏移，原占位空间保留，不影响其他元素布局 -
absolute：脱离文档流，相对于最近的「已定位祖先元素」（即position不为static）定位；若无，则相对于初始包含块（通常是视口） -
fixed：也脱离文档流，但始终相对于视口定位，滚动时位置固定 -
sticky：条件式定位，表现为relative和fixed的结合体，触发临界点（如top: 0进入视口）后才“粘住”
为什么设置了 position 却没效果？
最常见原因是：只写了 position: absolute，但没写 top、left 等偏移值 —— 此时元素只是脱离了文档流，位置仍停留在原处（相当于 top: auto; left: auto）。
另一个典型陷阱是父容器没“被定位”，导致 absolute 子元素找不到参照系：
立即学习“前端免费学习笔记（深入）”；
- 父元素是
position: static（默认），子元素的absolute就会往上找，直到或视口 - 想让子元素相对于父元素定位？父元素必须显式设置
position: relative（或absolute/fixed）
示例：
.parent { position: relative; }
.child { position: absolute; top: 10px; left: 20px; }
这样 .child 才会相对于 .parent 的左上角偏移。
fixed 和 sticky 定位的滚动行为差异
fixed 一旦设置，就彻底脱离滚动上下文，无论页面怎么滚，它都钉在视口坐标上 —— 常用于悬浮按钮、返回顶部图标。
sticky 则依赖滚动位置判断是否“激活”：
- 必须指定至少一个偏移方向（如
top: 0），否则等同于relative - 元素在滚动前表现如
relative；当其边界到达指定偏移阈值（如距视口顶部 0px）时，才切换为fixed行为 - 仅在父容器内生效，超出父容器高度后会“失效”并随文档流继续滚动
注意：sticky 在父元素有 overflow: hidden 或 transform 时可能不触发，这是容易忽略的兼容性限制。
z-index 只对定位元素生效
z-index 控制层叠顺序，但它只对 position 值为 relative、absolute、fixed 或 sticky 的元素有效。对 static 元素设置 z-index 完全无效。
另外要注意层叠上下文（stacking context）的影响：
- 每个层叠上下文内部的
z-index是独立计算的 opacity 、<code>transform、filter、will-change等都会创建新的层叠上下文- 这意味着：即使 A 元素的
z-index是 999，B 元素是 1，但如果 B 所在的父容器创建了新层叠上下文，而 A 没有，B 仍可能盖住 A
调试时建议用浏览器开发者工具的“Layers”面板查看实际层叠结构，比单纯看 z-index 数值更可靠。
