一、深度讲解css定位position
（一）absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。祖上元素都没定位就相对第一个即最外层的祖先元素进行定位，如果有祖上元素设置了position：relative、absolute、fixed就相对此祖上元素定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
（二）fixed：生成固定定位的元素，相对于浏览器窗口进行定位。
（三）relative：生成相对定位的元素，相对于自身正常位置进行定位。
（四）static：默认值。没有定位，元素出现在正常的流中。
（五）inherit：规定应该从父元素继承 position 属性的值(这种情况一般可忽略)。
Example1:相对定位，相对于自身定位。
代码：
效果图：红色框框就是child自身的位置，然后相对自身移动50px。
Example2:绝对定位；由于o3的父级没有设置position，因此相对于最外层元素进行定位。
示例图：
由于浏览器都有默认的margin/padding，导致如上图，需要对默认浏览器margin/padding进行处理如下图所示：
之后得到示例图如下图所示：
对于上图，假设有疑问到底是对最外层定位还是对第一个父级（蓝色框）进行定位呢？我们可以做一个实验，把蓝色框框进行移动，假设绿色框不动，那证明就是相对最外层元素进行定位。如下图所示，
对o1进行设置：
示例图如下，可见并没有随之移动！
Example3:绝对定位；由于o2的父级没有设置position，因此相对于父级进行定位，会随着父级o2位置的移动而移动。
代码如下：
示例图：