详细描述css定位

定位 = 定位模式 （position）+位偏移（top、right、bottom、left）

1.静态static（默认）如下：div初始位置

2.相对定位(position:relative)
（1）子盒子相对于自身原来的位置进行移动
（2）不脱离标准流，后面的盒子不会占据它的位置
如下：紫色盒子相对于自身原来的位置进行偏移

position: relative;
    top: 100px;/*相对于自身原来的顶部进行偏移*/
    left: 80px;/*相对于自身原来的左部进行偏移*/

3.绝对定位(position:absolute)
(1)当子级盒子没有父级盒子或有未定位的父级盒子，子级盒子相对于浏览器可视化窗口进行移动
(2)绝对定位脱离标准流，后面的盒子会占据它的位置
(3)子级盒子绝对定位，可以在父级盒子内任意移动
重点：子绝父相
子级盒子绝对定位，父级盒子相对定位
原因：

• 子级盒子可以在父级盒子内任意移动，脱离标准流
• 父级盒子如果是绝对定位，脱离标准流，原位置被后面的盒子占据
• 父盒子需要加定位限制子盒子在父盒子内显示
  如下：紫色子盒子和灰色父盒子未定位前
  
  只对紫色子盒子进行绝对定位，可见紫色盒子是以浏览器为参照进行偏移，

 position: absolute;
   top: 210px;
   right: 100px;

如下图：

此时对灰色盒子进行position:absolute定位，灰色父盒子已脱离标准流，蓝色盒子则占据灰色盒子的位置

/*灰色盒子*/
  position: absolute;
  left: 100px;
/*紫色盒子*/
  position: absolute;
  top: 210px;
  right: 100px;

子绝父相

/*灰色盒子*/
 	position: relative;
    left: 100px;
/*紫色盒子*/
    position: absolute;
    top: 210px;
    right: 100px;

4.固定定位（position:fixed）

• 以浏览器可视化窗口为参照点进行偏移
• 跟父元素没有任何关系
• 不跟随页面的滚动
• 不占有位置，脱离标准流，是特殊的绝对定位

/*右侧fixed盒子进行固定定位*/
 position: fixed;
     top: 100px;
     right: 80px;