《css中的定位，z-index》理解

1：

• 祖父级（body）黑色矩形框；

• 父级（大绿块）未设置position；

• 子级（小黑块）设置 position：absolute；

    此时：小黑块，会相对于浏览器可视区域定位（不是body）；
  

2.

• 祖父级（body）黑色矩形框；

• 父级（大绿块）position ：relative；

• 子级（小黑块） position：absolute；

    此时：小黑块会相对于设置了position：**relativae**最近的的父级或祖父级进行定位；
    且relative不会导致上一级的高度塌陷；
  

3.

• 祖父级（body）黑色矩形框；

• 父级（大绿块）position ：absolute；

• 子级（小黑块） position：absolute；

    此时：小黑块会相对于设置了position：**absolute** 最近的的父级或祖父级进行定位；
    且absolute会导致上一级的**高度塌陷**；
  

4.

• 父级（大绿块）z-index : 2；（上层）

• 子级（小黑块） z-index : 1；（下层）

    理应：小黑块被大绿块覆盖
    但实验表明：即便子级z-index比父级低，但仍不会被父级覆盖；
    z-index:适用于兄弟级