absolute 表示绝对定位，relative 表示相对定位，两者在定位机制上存在本质区别。

1、 相对定位指的是元素依据其在文档流中原本所处的位置进行偏移，而非相对于其他兄弟元素。

2、 当将元素设置为相对定位时，它仍保留在标准文档流中，仅在其原始位置基础上进行上下左右的位移。

3、 }

4、 此例中，灰色盒子采用相对定位，因此它是在自身原本位置的基础上，向下偏移了50像素，该偏移参照的是其未定位前的正常位置，而非红色盒子、绿色大容器或页面顶部。

立即学习“前端免费学习笔记（深入）”；

5、 绝对定位则使元素以最近的已定位（即 position 值为 relative、absolute、fixed 或 sticky）祖先元素为参考点进行定位；若无此类祖先，则以初始包含块（通常是视口）为基准。

6、 启用绝对定位后，元素将脱离标准文档流，不再占据原有空间，也不影响其他元素的布局。

7、 }

8、 如图所示，灰色盒子设置了绝对定位，并以绿色父容器为定位上下文，因此它距离绿色容器顶部为50px，与红色盒子的位置无关。

9、 z-index 用于定义元素在 z 轴方向上的堆叠层级，仅对已定位元素（即 position 不为 static）生效；数值越大，图层越靠前。

10、 接下来分析如何让步骤2中的红色盒子显示在最上层，而灰色盒子处于底层。只需合理设置 z-index 值，即可精确控制各元素的层叠顺序，达成预期视觉效果。

11、 为确保红色盒子始终位于顶层，将其 z-index 设为 2，从而高于同级其他已定位元素。

12、 }

13、 }