relative定位“不占位却还占位”是因为元素仍在文档流中，原始位置被保留，仅视觉偏移；absolute失效主因是缺少已定位祖先，需父级设relative以提供定位上下文。
relative 定位为什么“不占位却还占位”？
因为 position: relative 的本质是：元素仍在文档流中，它的原始位置被完整保留，只是视觉上发生了偏移。其他元素完全感知不到它动过，布局照常计算。
- 设置
top: 20px后，元素向下挪了 20px，但它原来那块空间还在，下方元素不会上移 - 你不能靠它把父容器“撑高”，但它的
margin、padding和内容仍参与盒模型计算 - 常见误用：想用
relative把一个按钮“浮起来”，结果发现背景色没盖住下面文字——因为原位置留空，内容重叠了
absolute 定位失效的最常见原因
不是代码写错了，而是缺少“定位上下文”：当 position: absolute 元素找不到最近的 position 值为 relative、absolute 或 fixed 的祖先时，它会直接相对于视口（body）定位——这往往导致元素飞到页面左上角或意外遮挡。
- 修复方法：给父容器加一句
position: relative（哪怕它本身不需要偏移） - 别用
position: absolute作为父容器，否则可能引发嵌套错位；relative是最安全的“定位锚点”选择 - 检查浏览器开发者工具里该元素的“Computed”面板，看
offsetParent是谁——这才是它真正参照的对象
relative 和 absolute 搭配使用的底层逻辑
所谓“内绝外相”，不是约定俗成的写法，而是 CSS 定位机制决定的必然组合：子元素要相对于父元素精确定位，父元素就必须成为“已定位祖先”。而 relative 是唯一既满足这个条件、又不破坏自身布局的选项。
-
position: static（默认）不行：它不算“已定位”，子级absolute会继续往上找 -
position: absolute或fixed作父级也不推荐：会让父级脱离文档流，影响整体结构稳定性 - 一个典型场景：
.dropdown { position: relative; } .dropdown-menu { position: absolute; top: 100%; left: 0; }——菜单始终贴着触发按钮底部展开，且不挤占其他内容空间
z-index 在 relative 和 absolute 下的表现差异
z-index 只对“定位元素”（即 position 不为 static）生效，但它在两种定位下的堆叠上下文生成规则不同：
立即学习“前端免费学习笔记（深入）”；
-
relative元素设z-index，只影响它自己和同级定位元素的层叠顺序 -
absolute元素设z-index，会创建新的层叠上下文（stacking context），其内部所有子元素都受这个新上下文约束——哪怕子元素是relative，z-index 也只在该上下文内比较 - 容易踩坑：父
absolute设了z-index: 10，子元素relative设z-index: 999，依然会被同级另一个z-index: 20的兄弟元素盖住
absolute 前，下意识去查它的 offsetParent 是不是你预期的那个父容器。 
