HTML定位与z-index解析

absolute为绝对定位，relative为相对定位，二者定位方式不同。

1、 相对定位是指元素相对于其同级前一个元素的位置进行定位。

2、 设置元素为相对定位，位置相对于其正常位置进行偏移。

3、 }

4、 灰色盒子的定位是相对于同级的红色盒子向下偏移50像素，而非相对于绿色大盒子或网页顶部的50像素位置。

5、 绝对定位是元素相对于其最近的定位祖先元素进行定位，位置独立，不受同级子元素影响。

6、 采用绝对定位方式，元素将脱离正常文档流进行布局。

7、 }

8、 所示，灰色盒子距离绿色父级容器顶部50px，而非红色盒子底部50px。

9、 z-index代表网页的层级顺序，通过定位将图层重叠时，数值越大，图层位置越靠前。

10、 接下来探讨如何让步骤2中的红色盒子显示在上层，灰色盒子置于底层。通过调整z-index属性，即可控制元素的堆叠顺序，实现所需效果。

11、 红色盒子需位于上方，故其层级设为2，确保高于其他元素。

12、 }

13、 }