Positon 属性:是用来对元素进行定位的。定位就是允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
Position的属性值有:
(1)static:它是position的默认值。默认块级元素和行内元素按照各自的特性进行显示;
(2)relative:设置这个属性,相对于元素本身在文档中应该出现的位置来移动这个元素,具体根据top,left,bottom,right,进行偏移,关键点,是它原本的空间仍然保留。举个例子说明,如图:
设置 相对定位后,css代码如
Htnl 代码如
效果图如
上面的div1虽然向上,向左偏移了,但是它所占的位置还在,下面的div2仍然距离父元素150px;这就是它的特点。
Relative属性自己经常用在作为ablsoute元素的包含块了,对设置了ablsoute这个元素进行限制位置偏移。
(3)abosulte:元素设置绝对定位后会脱离文档流,然后相对其包含块进行偏移,不占有原本的空间,后面的元素会顶上去,而且行内元素或者块级,都会生成一个块级框。举个例子:如下图
Css代码:
Html代码:
效果图:
相对与父元素进行了绝对定位,向上,向左,设置的绝对定位后,脱离文档流,后面的元素顶上来,看下面的实现代码与图;
Css代码
Html代码
效果图
下面的div2元素顶上去,占据了原来div1没有设置absolute 的位置,也就说明了,设置absolute元素会脱离文档流,但是和前面说的float元素脱离文档流,还不一样,float说的是盒子会无视这个元素,但文本内容会环绕,会为这个元素让出位置;而absolute脱离文档流,其他盒子与盒子内的文本都会无视它,占据它原有的位置,这样设置的文本就被视觉挡住,看不见了。因此,在使用绝对定位时候,经常使用css z-index来控制页面的层重叠顺序。
(4)fixed:生成绝对定位元素,类似与绝对定位,它是相对浏览器窗口进行偏移的。一般用在导航栏固定在顶部,或者顶部,来使用。举个例子说明:
Css代码如图
Html代码如图
效果图如
(6.3)当滚动条向下滚动时,红色部分依然固定在顶部,这就是fixed的应用。
这些就是关于position的简单应用,以及基本原理,更深入的请查看http://www.zhangxinxu.com/wordpress/2011/03/css-相对绝对relativeabsolute定位系列,讲的非常深刻,由于个人只是欠缺,暂时还没没看懂。