position是css布局核心属性，决定元素位置、文档流脱离、参考系及层叠关系；必须显式声明relative/absolute/fixed/sticky才能使top等生效，且z-index仅在定位元素及同堆叠上下文中有效。
是的，position 是 CSS 布局最基础、最核心的属性之一——它不光决定元素“在哪”，更直接控制元素是否脱离文档流、以谁为参考系、能否叠加、甚至影响滚动行为。
为什么改了 top 却没动？——定位模式必须显式声明
很多人写 top: 20px 没反应，根本原因不是样式写错，而是漏了 position 值。静态定位（Static）下所有偏移属性（top/right/bottom/left）完全无效。
-
position: static是默认值，可省略，但一旦省略，top就是摆设 - 想用
top，必须搭配relative、absolute、fixed或sticky - 常见错误：只给子元素写
position: absolute，却忘了父容器要加position: relative（否则它会往上找，甚至跑到上）
relative 和 absolute 的协作关系：父相子绝不是口号，是硬性依赖
所谓“子绝父相”，本质是定位上下文（containing block）的生成规则：absolute 元素不会认 static 父级，只认最近的非 static 祖先。
- 如果父级是
position: static（即没写或写了static），子元素的absolute会继续向上查找，直到 - 父级设
position: relative不改变布局，但“激活”了自身作为定位参考系的能力 - 不要对
直接设relative——它可能被重置样式干扰，且容易引发嵌套混乱 - 示例：
.card { position: relative; } .card-badge { position: absolute; top: 8px; right: 8px; }这样
.card-badge才真正在卡片右上角
fixed 和 sticky 看似相似，但滚动行为逻辑完全不同
fixed 是“钉死视口”，sticky 是“临界切换”——后者依赖滚动位置触发状态变化，不是单纯固定。
立即学习“前端免费学习笔记（深入）”；
-
position: fixed：完全脱离文档流，相对于浏览器窗口定位，滚动时纹丝不动 -
position: sticky：必须指定top、bottom、left或right之一才生效；未滚动到阈值前表现如relative，越过之后才变成类似fixed - 兼容性注意：
sticky在 IE 完全不支持，edge ≤15 也不行；fixed在 IE7/8 需要!DOCTYPE声明才能工作 - 性能提示：
fixed和sticky可能触发合成层（compositing layer），频繁滚动时留意渲染开销
z-index 为什么有时失效？——它只在定位元素上有意义
z-index 不是全局图层开关，它的作用范围严格受限于定位上下文和堆叠上下文（stacking context）。
-
z-index对position: static元素无效（连解析都不解析） - 即使两个元素都设了
z-index，如果它们属于不同堆叠上下文（比如父级分别有opacity: 0.99或transform），数值大小也不跨上下文比较 - 常见陷阱：给弹窗加
z-index: 9999，结果被一个没设z-index但有transform的父容器盖住——因为那个父容器创建了新的堆叠上下文，把弹窗“锁”在里面了
真正难的不是记住五个值，而是理解每个值背后对文档流、包含块、堆叠上下文的隐式改变。写错一行 position，可能让整个布局链崩掉——它不像颜色或边距那样局部可控，而是牵一发而动全身。