文章目录
position
static
默认值是static，即没有指定position属性值的元素的这个属性都是取默认值static的，表示非定位元素
relative
相对定位，相对于自己static的时候的位置，进行偏移。left表示要左边要空出多少。
例子：
此时，三个都是static的，修改蓝色部分position为relative，left=40px；top=20px，效果如下
修改后，因为只是针对自己static位置的，不影响其他元素，比如绿色区域没动，蓝色部分覆盖了绿色部分
层概念
都是static的时候，在布局流里面，后面的位于前面的上层，比如我们在都是static的情况下，设置绿色部分为margin-top=-40px；效果如下：
明显的绿色覆盖了蓝色部分，因为在布局流里面，绿色的在后面
但是再看前面蓝色设置为relative的部分，蓝色覆盖了绿色，也就是说设置position属性是非static的，会在static的上层
这里说的层是z轴层
z-index
这是另一种调整层的方式，z轴，也就是垂直于屏幕的轴。
这个属性只有在position属性是非relative的时候才有效，且值越大的，z轴上越靠前。也就是说值大的会在值小的上层
一般的，如果要通过这个属性来调整层的话，将他们都设置为relative的，然后再设置z-index的值
absolute
绝对定位
在父级容器都是static的时候，相对于最高级的父级元素定位
我们定义蓝色部分position为absolute，他就是非static的，就是一个定位元素，位于static元素的上层
我们继续设置蓝色区域的left=20，top=30，效果如下。
因为父级元素都是static的，所以它会对于最顶层的父级元素进行定位（比如一般的页面，会找到最高层的html标签），且范围是是当前浏览器中，一屏可视的页面内容区域。
父级容器有非static的时候，相对于最近的父元素做定位
也就是说，如果父级元素和爷爷级元素都是非static的时候，它只会去找父级元素的当前可视范围作为定位标准
fixed
相对于浏览器视口做定位的。也就是即使页面滚动，也不影响在浏览器视口中的位置。
小结：
理解两个概念：
- 设置position为非static的时候，相当于自己单独一层
- 相对于谁来设置了定位，是自己static时候的位置？还是父级容器的可视范围？还是浏览器的可视范围
