首页 > 代码库 > CSS浮动、绝对、相对定位

CSS浮动、绝对、相对定位

浮动

float:属性{

    float:none;    默认值,对象,不漂浮

    float:left;  文本流向对象的右边

    float:right;

};

清除浮动

clear:属性{

    clear:none;  允许对象两遍都可以浮动

    clear:left;   不允许左边有浮动

    clear:right;  不允许右边有浮动

    clear:both;  两遍都不允许有浮动

};

 

定位

position:属性{

    position:static;     静态定位

    position:fixed;      固定定位

    position:absolute;   绝对定位 

    position:relative;  相对定位

};

绝对定位 (absulote):将对象从文档流中拖出使用left,rigt,top,bottom属性,相对于最接近得一个具有定位设置的父对象,进行绝对定位,如果不存在这样的父对象,则依据body对象。绝对定位对象可层叠,层叠顺序可通过z-index 属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持)。

相对定位 ( relative ) :对象不可层叠,但是,left,right,top,bottom,这些属性在正常文档流中偏移位置。同样可以用z-index分层设计。

 

定位的形象解释

(1) 绝对定位(absolute)

如果使用决定定位,绝对定位对象会让出自己原先占用位置,它是贡献的。如果之前没有对父元素定位,那么子元素位置不会受父元素位置影响,父元素怎么移动,子元素还是在原来的位置,至于子元素要在哪个位置,则以html(body左上角)上角为准,用left,right,top,bottom值来定位,但是如果父元素也给出了定位设置(通常是相对定位),此时子元素的位置就没有那么自由了,尽管此时子元素改变位置了也不会影响父元素(文本流),但它还是要遵循父元素的话,父元素会告诉它"你可以活动,但应该在我的范围内走动,比方说我要你在我左上方1米处,你就要跟死这一点,我走你也要跟着走",课件绝对定位的对象参考目标是它的父极。专业惩称之为包含块。

(2)相对定位(relative)

相对定位一个最大的特点是:自己通过定位离开了还占用着原来的位置,不会让给他周围的文本流之类的对象,相对定位也比较独立,做什么事他自己说了算,要定位的时候,它是以自己本身所在位置偏移的,文本流相对定位对象还存在影响,因为对象并没有真正脱离文本流,就像两个人在同一层楼水平移动的过程中会有朋友的机会。

 

总结两种定位的特征

绝对定位就像是把不同对象安排到了移动高楼的不同楼层,它们互不影响,但是它们怎么移动与你楼的地基和面积(父极)有关,相对定位指对象还是在首层楼与文本流一起存放,它们之间肯定存在影响。

再用相对定位和绝对定位的时候,有一种情况是它们的定位值用到了负值则对象可沿相反方向移动,刚才说到的把对象安排在一栋楼的不同层,如果某个对象一开始就是背靠着最外边墙的,此时再用一个负值定位它,他就会神奇般的跑出墙外去了,当然现实中可没有这种惊险而又神奇的事发生。

对于普通的页面布局,不到万不得已不要使用absolute进行定位。

想重构高质量的页面,少用绝对定位布局

 

CSS浮动、绝对、相对定位