relative定位先占位再偏移，原位置保留；absolute参照最近已定位祖先，丢失则回退视口；fixed不随滚动容器移动，局部固定优先用sticky；z-index仅在同层叠上下文内生效，opacity等属性会隐式创建新上下文。
Relative 定位不是“相对别人”，而是“先占位再偏移”
很多人以为 position: relative 是为了给子元素 absolute 做参照，其实它第一要务是“自己先老老实实占个文档流位置”，然后才按 top/left 偏移。偏移后原位置仍被保留，不影响后续元素布局——这点常被误读为“没效果”或“卡顿”。
- 偏移量为 0 时，
relative和默认static视觉无区别，但已获得“定位上下文资格” - 子元素设
absolute时，只认最近的已定位（non-static）祖先，不一定是父级；如果父级是static，就会继续往上找 - 别在
relative元素上滥用z-index：它只对同层定位元素生效，且必须配合position才起作用
<div style="position: relative; top: 10px;"><div style="position: absolute; top: 0; left: 0;">贴左上角，但参照的是外层 div 的偏移后位置</div></div>
Absolute 元素的“参照丢失”问题怎么快速定位
absolute 元素突然飞到页面左上角（0, 0），90% 是因为找不到已定位祖先，最终回退到初始包含块（通常是视口）。这不是 bug，是规范行为。
- 检查父级是否真设置了
position: relative/absolute/fixed，而不是只写了position: relative却被 CSS 重置规则覆盖 - 注意 Flex 或 Grid 容器里的子项：即使父容器是
relative，若子项是absolute，它仍以该父容器为参照——但父容器若没设高宽，可能视觉上“撑不开” - 使用浏览器开发者工具的“Computed”面板，看
position是否生效、containing block显示的是哪个元素
常见误写：.parent { position: relative; } 看似正确，但如果被 .parent { position: static !important; } 覆盖，就彻底失效。
Fixed 定位和滚动容器冲突时，别硬扛，换思路
position: fixed 天然脱离文档流、相对于视口定位，所以它不会随父容器滚动。但很多人想实现“在某个滚动区域里固定”，比如侧边栏随局部容器滚动而固定——这用 fixed 实现不了。
立即学习“前端免费学习笔记（深入）”；
-
fixed在transform、perspective、filter（非 none）的祖先下，会转为相对于该祖先定位（变成类似absolute），这是隐式行为，容易踩坑 - 滚动区域固定需求，优先考虑
position: sticky：它在滚动到阈值前是relative，之后变fixed，且天然支持局部容器 - 如果必须用
fixed，得手动监听scroll+getBoundingClientRect()计算位置，性能差、易抖动，不推荐
.sidebar {
position: sticky;
top: 12px; /* 滚动到距容器顶部 12px 时吸顶 */
}
三者混用时 z-index 的层级陷阱
z-index 不是全局排序号，它只在同一个“层叠上下文（stacking context）”内有效。而 relative、absolute、fixed 本身不会创建新层叠上下文，但一旦加上 z-index（且值不为 auto），就会触发。
- 父元素
z-index: 1，子元素z-index: 999，不代表子一定在最上层——如果父的层叠上下文被更外层的z-index: 2容器盖住，整个父+子都会被压住 -
fixed元素默认创建独立层叠上下文，所以它的z-index只跟同级fixed或根层叠上下文比，不跟普通文档流元素直接比 - 调试时打开 DevTools 的“Layers”面板（Chrome），能直观看到哪些元素触发了新层叠上下文
最常被忽略的一点：opacity
