CSS之定位属性

定位属性

定位属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

1.参照物：
  参照物是指最近的具有定位的祖先元素。
  定位时需要的参照物，不一定是写在父元素上，参照物可以是任意的祖先元素，所有的定位都可以做参照物，当父元素上没有定位的话，就会先上级找定位作为参照物（就近原则，会先已最近的上级有定位的元素作为参照物）

2.position属性：

定位	描述
absolute	绝对定位，相对于 static 定位以外的第一个父元素进行定位。
relative	相对定位，相对于其他正常位置进行定位
fixed	固定定位，定对于浏览器窗口进行定位
static	默认值，没有定位

 
3.定位使用：
  3.1 固定定位：
   ①只写高度百分之百不能铺满，加了fixed定位才可以
   ②left:0; right:0;top:0;bottom:0;
     不加宽度就会铺满
     加了宽度和margin:auto 可以居中
   ③定位之后，宽度不会在铺满
     注意：写了定位一定要写宽度
   ④定位会飘出文档流，不占位置（直接用margin-top挤下来）
   ⑤层级(一般不使用)：z-index，比较值的大小，没有单位，可以为负(可以理解为z轴，不写默认值为0，向前为正，向后为负)
 
  3.2 绝对定位：
    使用方式：当一个盒子飘在另外一个盒子上面的时候，采用绝对定位
即：在一般使用过程中，给需要定位的元素使用absolute，它的参照物可以给到距离该元素最近的父元素relative。

position:absolute;
/* 有绝对定位就有参照物 */
然后给需要垫下面的盒子的父元素中写
/* 参照物：一定给父元素 */
position:relative;

 
  3.3 相对定位：相对于本元素而言的，当hover时保留原有的位置，没有脱离文档流，也可以使用z-index，偏移值不占位置
 
4.各定位之间的区别
 4.1 relative与absolute区别
  relative是相对自己而言，absolute是以祖先元素作为参考物
  relative是不会脱离文档流，absolute是会脱离文档流
 
 4.2 fixed与absolute区别
  fixed永远参考浏览器
    固定定位不受父元素控制
  absolute是参照物具有定位的祖先元素
 
 4.3 脱离文档流的问题
  脱离文档流的判断：是否占位置，不占位置的就是脱离文档流
  fixed和absolute是脱离文档流的
 
5.常用状态：
  定位时需要左右居中
   在需要移动的盒子中写：

position:absolute;
margin:auto;
left:0;
right:0;

  定位时需要上下居中
   在需要移动的盒子中写：

position:absolute;
margin:auto;
top:0;
bottom:0;

  定位时需要浏览器居中
   在需要移动的盒子中写：

position:absolute;
margin:auto;
top:0;
left:0;
right；0；
bottom:0;