position理解、margin-left与left的区分

在W3C中，如是说：
position
可能的取值：

absolute    
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。   
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed   
生成绝对定位的元素，相对于浏览器窗口进行定位。 
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative    
生成相对定位的元素，相对于其正常位置进行定位。 
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static  默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

理解：
1>在元素布局中无外乎有两种定位方式

1>position:static;
2>其他
//即：所有元素都处于定位状态

2>绝对定位：

1>position:absolute
绝对定位定位的是除static以外的情况，即position:absolute中的top,left是相对于其已经被定义的除static以外的父级元素的相对位置，如果无的话，则向上继续寻找定位的祖辈元素，还是没有的话，则以body为准
2>position:fixed
此绝对定位是以浏览器窗口为准的

3>相对定位：

相对定位是相对于元素如果不设置定位的话，即position:static的情况下的偏移位置

4>注意

直接在css中设置left生效的前提是必须设置父容器position:absolute或relative
即如果想要使left和top生效的话，必须得设置position:relative,absolute,fixed;设置static不可以

//区分margin-left与left：
一、在有定位声明的情况下：即position:absolute,relative,fixed这几种情况下

1>只有margin-left：这样子position的声明没有任何作用，因为即使声明了，也得靠left,top来调整位置，如果没有left等，则position失效，元素位置仍为其该在的位置，margin-left还是相对于其父元素的距离
2>只有left等：正常情况
3>同时有margin-left和left：这种情况下，定位是有作用的，在定位完成后margin-left再起作用，即margin-left和left是可以叠加的

二、在无定位声明或position:static的情况下

left等的定义无效，margin-left有效

//综上：position的声明和left等的定义必须同时存在，缺少其中任何一方，都使得定位无效

//注意：在jQuery中有一个函数是

        $().position().left
        $().position().top
        $().position()

这三个函数获得的返回值都是所对应的left或top的值，如果元素布局中涉及到了margin-left与left叠加，则函数获得的只是left的值，与margin-left无关
所以建议，只要涉及到了position尽量不用margin