浅谈css中定位的使用。

定位是用来解决布局问题。在写前端的时候可谓是经常会用到，那么就简单的谈一下它的使用方法吧！
一，相对定位:position:relative
1.1相对的是自身原来的位置
1.2可以用top，right，bottom，left设置相对位置
top，bottom设置上下移动的位置
left，right设置左右移动的位置
1.3相对位置不脱离标准文档流
1.4作用：
1>微调
2>可以作为绝对固定的参照物
3>所设置的top，right，bottom，left 的数值，是与本来所在位置偏移的距离，不是向所写位置移动
4>元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
书写方式：

二，绝对定位:position:absolute
2.1需要参照物：
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
原始位置变了
1>页面的左上角
2>浏览器的左下角
2.2绝对固定的位置脱离标准文档流
2.3字类也会从属父类做一个参照选择
2.4参照物的选择：
1>选择父盒子作为参照：父盒子必须要固定
2>父盒子作为查找，不单单是指父标签的盒子，而是指祖先标签的盒子
3>父盒子作为参考点可以是绝对固定
4>绝对固定的儿子会忽视父盒子的padding
5>绝对定位居中的换算公式:
left:50%  -> 父盒子的宽度宽度一般
margin-left: -盒子的宽度的一半
绝对定位写法：

三，固定点位:position:fixed
3.1相对于浏览器窗口定位，页面无论如何滑动，显示的盒子都不会改变位置
3.2具有脱标性
固定定位写法：

 注意：相对、绝对和固定定位都会浮在正常文档流的上面，如果遮盖了正常显示的文档流，可以设置z-index来消除。
四，js获取DOM元素来进行定位
DOM定义：

获取元素的位置属性eg：
HTMLElement.offsetLeft
HTMLElement.offsetTop
这里需要注意的是，这些属性所存储的数值不是该元素相对于整个浏览器画布的绝对位置，而是相对于其父元素位置的相对位置。也就是说这两个数值是以其父元素左上角为（0，0）点计算出的数值。
/*获取元素的纵坐标*/
function Top(e){
   var offset=e.offsetTop;
   if(e.offsetParent!=null){
     offset+=Top(e.offsetParent);
   }         
   return offset;
}
/*获取元素的横坐标*/
function Left(e){
   var offset=e.offsetLeft;
   if(e.offsetParent!=null){
      offset+=Left(e.offsetParent);
   } 
   return offset;
} 
 获取元素的绝对位置，无非是根据元素距浏览器左边(left)和顶部（top）,我们可以稍稍改变一下得到一方法
function getElemPos(obj){
        var pos = {"top":0, "left":0};
         if (obj.offsetParent){
           while (obj.offsetParent){
             pos.top += obj.offsetTop;
             pos.left += obj.offsetLeft;
             obj = obj.offsetParent;
           }
         }else if(obj.x){
           pos.left += obj.x;
         }else if(obj.x){
           pos.top += obj.y;
         }
         return {x:pos.left, y:pos.top};
}