position定位的理解（进阶）

一 position:static

当position默认static时候 top, bottom, left, right 或者 z-index 就不会生效

此时的效果

第二个div并没有移动

**二：relative **
生成相对定位的元素，相对于其正常位置进行定位。

因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

效果：

黑色块会根据红色块（当前位置）进行水平垂直居中

三 absolut
相对于 static 定位以外的第一个父元素进行定位

四：子绝父相,absolut relative
absolut会找到距离自己最近的父元素并且含有relative的属性作为父元素
例如：

效果：
白色块会根据黑色块居中

如果我把黑色块里的relative去掉

它就会跑到屏幕的正中央，
这是因为当没有relative属性时候，position就默认static
然而生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
所以会一直往上找 直接到了body部分

如果我在红色部分加relative呢？

效果如下

那么他就会往上找到relative作为参照物进行定位

五：inherit

代码：

效果：：

此时，第一个红色块相对定位作为父元素，黑色块根据红色块作为定位，然后白色块会继承黑色块的position，根据红色块进行定位