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

猜你喜欢

转载自blog.csdn.net/qq_42127861/article/details/82020766
今日推荐