上一篇博客,我大概介绍了下浮动的使用及行为。其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当。
一、定位分类:
a、静态定位 position:static; :元素按照正常的文档流顺序出现,位置等不产生任何改变(文档流的默认属性)。
b、相对定位 position:relative;:元素盒会产生移动,并且它在文档流中的原始空间会保留下来。
c、绝对定位 position:absolute;:元素从文档流中脱离出来,相对于容器块产生移动,原始空间不会被保留,周边元素将会占据它原来的空间。
d、固定定位 position:fixed;:元素从文档流中脱离出来,但是他们是相对于浏览器(视口)产生的位置的改变。目前有些浏览器不支持该种定位方式。
注:对于被设置为静态或相对定位的非根元素,容器块是它最近的块级元素、表格单元的内容区的边缘。
对绝对定位的非根元素,容器块是它最近的不是静态定位的祖先元素(即它的父级元素必须为position:absolute;或者position:relative;或者position:fixed;)
二、position 的属性:
当一个元素的position 定位类型一旦被确定后,它有四个偏移属性:top right bottom left (四个属性的值可以设置为:长度、百分比或者auto;)
a、相对定位:position:relative;
(top right bottom left )相对于它们在文档流中的初使位置进行定位,没有设置偏移属性的,默认值设为auto;
在文档流中所占据的原始空间被保留;
可能会覆盖其它元素;
当设置为相对定位时,使层位置产生偏移,但并不影响文本流中接下来其它层的位置;
当设置为相对定位时,层的层叠级别高于文本流的级别(即优先顺序是越靠近越产生影响);
当两个元素设置为相对定位时,同等级别下会按照文本流的顺序层叠显示。
.a {position:relative;top:100px;left:100px;}
b、绝对定位:position:absolute;
(top right bottom left )相对于容器块边缘(包括margin值)进行定位,没有设置偏移属性的,默认值设为auto;
在文档流中占据的原始空间不被保留;
当设置为绝对定位时,该层将从文档流中脱离,以该层所在的容器块的坐标原点为参考进行偏移,不会对其它元素产生任何影响;
注意:当容器块没有设置position属性或者position属性为static时候,将以body或html的坐标原点为参考。
.b {position:absolute;top:100px;left:100px;}
注意:建议文档流中慎用position属性,尽量使用float属性来对文档流相关元素进行定位!!!