定位

position:relative(相对定位)

.box{
    width:100px;
    height:100px;
    background-color:yellow;
    position:relative;
    left:200px;
    top:200px;
}

1.相对定位的特点:如果开启之后,不设置变义量的时候,元素是不会发生任何变化,如果开启了元素定位的时候，就可以设置上下左右.
2.为一个元素定位,使用两个偏移量,一般选用水平方向的偏移量和垂直方向的偏移量
3.相对定位是相对于本身的定位来定位.

position:absolute(绝对定位)

.box{
      width:100px;
      height:100px;
      background-color:yellow;
      position:absolute;
      left:0;
      top:0;
}

1.绝对定位的特点:如果开启了绝对定位,会使元素脱离文档流
2.绝对定位是相对于开启了定位的父亲,如果谁都没开启定位就相对body来定位

position:fixed(固定定位)

.box{
      width:100px;
      height:100px;
      background-color:yellow;
      position:fixed;
      left:0px;
      top:0px;
}

1.固定定位的特点:如果开启固定定位,也会脱离文档流,不设置偏移量的化,默认位置不会发生变化
2.不同点:固定定位相对于浏览器窗口定位(IE6不支持固定定位)