position的五种取值为static、relative、absolute、fixed、sticky；其中仅relative/absolute/fixed/sticky响应top/left等偏移，static为默认值，不参与定位计算且不触发层叠上下文。
position 的五种取值中，只有 relative、absolute、fixed、sticky 会触发定位行为并响应 top/left 等偏移；static 是默认值，完全不参与定位计算，也不影响层叠上下文。
为什么 relative 元素“占位”却能移动
设置 position: relative 后，元素仍在文档流中占据原始空间（即“不脱标”），但可以通过 top、left 等属性相对于自身原位置偏移。这种偏移不会挤压或推开其他元素，但可能造成视觉重叠。
- 常见错误：给
relative元素设了top: 20px却发现下方内容没上移——这是正常行为，因为它只是“画布上挪了，位置框还留着” - 使用场景：微调按钮对齐、为子元素创建定位上下文（比如让子
absolute相对于它定位） - 注意：同时写
top和bottom时，top优先生效；left和right同理
absolute 定位失效的三个典型原因
position: absolute 的定位锚点取决于“最近的非 static 父元素”，不是父元素本身有没有 div，而是它有没有被显式设过 position（哪怕只设了 relative 且没写偏移）。
- 父元素没设
position→ 锚点退化为body，导致元素飞到视口左上角 - 父元素设了
position: static（显式覆盖）→ 等同于没设，仍向上查找 - 父元素宽高为
0或未设置尺寸 → 子absolute的left: 50%会按0px计算，看起来“消失” - 性能提示：大量
absolute元素会增加重排开销，尤其配合频繁 JS 修改top/left
fixed 和 sticky 的滚动行为差异
position: fixed 始终相对于视口固定，滚动时绝对不动；position: sticky 则是“临界切换”：在滚动到指定阈值前表现如 relative，越过之后才变成类似 fixed 的吸附效果。
- 关键限制：
sticky必须配合top或bottom才生效，单独写position: sticky无效 - 兼容性坑：
sticky在 iOS Safari 15.4 之前需加-webkit-sticky前缀；Android WebView 支持度也较晚 - 常见误用：把
sticky用在display: flex的子项里，某些旧版 Chrome 下会失效 -
fixed元素脱离文档流，会遮挡后续内容——记得预留padding-top或margin-top避免文字被盖住
z-index 层叠不是“越大越上”，而是看层叠上下文
z-index 只在同一个层叠上下文中起作用。一个 relative 元素设了 z-index: 999，但它的父容器是 absolute 且 z-index: 1，那么整个子树都会被压在另一个 z-index: 10 的兄弟容器下面。
- 触发新层叠上下文的条件包括：
position非static+z-index不为auto，或opacity 、<code>transform非none、filter等 - 调试技巧：Chrome DevTools 的 Layers 面板可直观查看层叠上下文边界
- 容易忽略：
fixed和absolute元素即使z-index相同，文档流中后出现的仍会覆盖先出现的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
