CSS: float属性和position属性的区别和应用(一)

在使用div+css进行网页制作时，我们经常需要对某些元素进行一些必要的定位，使其能按照我们预想的效果呈现在页面合适的位置上，而float和position便是实现这一效果的两种方法。

一、浮动(float)

float属性经常被运用于制作Horizontal Menu（横向菜单）和实现多列式网页布局。根据它提供的left 和right 两个值，我们可以很容易的把特定的元素从文档流中抽出（也因此浮动元素不占用正常文档流的空间），靠左或者靠右对齐，而文字内容则围绕在浮动元素的周围。如果是一系列的浮动元素，则会根据所指定的浮动方式自动的排列成一行；如果页面宽度不够，则会自动换行。

二、定位(position)：相对定位(relative)、绝对定位(absolute)和z-index属性

position属性同样可以实现和float属性一样的效果，其主要被运行于网页布局上。它主要提供static, relative, absolute和fixed四个值。其中static为默认值，指示元素出现在正常的文档流中；另外三个的说明详见如下：

相对定位(relative)：相对于该元素在文档流中的正常位置进行偏移定位，原占位仍保留。

绝对定位(absolute)：相对于static定位以外的最邻近父级元素进行偏移定位，即相对于其直接父级元素。绝对定位较少直接单独使用在正常的文档流中，而是配合相对定位来进行一些更灵活更精确的定位。换言之，就是绝对定位主要运行于进行了相对定位的元素框架层里面，然后依据该层的最左上点作为基点进行偏移定位。

固定定位(fixed)：相对于浏览器窗口进行定位，即固定定位是以浏览器窗口的最左上点作为基点进行偏移定位的。其位置随时跟随浏览器大小的变化而移动，因此应用得很少。主要运行于浏览器窗口的贴边定位。绝对定位(absolute)同样可以应用在固定定位的框架层里面。

对于这三种定位，被定位的元素的位置都是通过 "left", "top", "right" 以及 "bottom" 这四个属性进行指定的。需要将被这三种方式定位的对象还原到正常的文档流中，可使用static属性对其再次定位。

z-index属性：使用了以上三种定位后，都会使正常的文档流一定程度上发生改变，造成元素显示出现重叠的情形，特别是使用绝对定位时。为了能让重叠的元素有序的显示出来，我们需要在定位时对相关元素加上z-index属性，其值是一个整数值（默认值为0），数值越大表示拥有的优先级越高。该属性只对使用了定位的元素有效。

示例：

column1

z-index默认值为0，数值越大表示该元素拥有更高的显示优先级。

column2

column3

column4

html代码：

?

1 2 3 4 5 6 7 8 9

< div id = "demo" > < div class = "column c1" >column1</ div > < p >z-index默认值为0，数值越大表示该元素拥有更高的显示优先级。</ p > < div class = "column" id = "c2" >column2</ div > < div class = "column" id = "c3" >column3</ div > </ div > < div id = "d2" > < div class = "column c1" >column4</ div > </ div >

css代码：

?

1 2 3 4 5 6 7

#demo { position : relative ;  background-color : #ccc ; z-index : 0 ;} .column { padding : 10px ;  width : 200px ;  } .c 1 { background-color : red ; position : absolute ; top : 0 ; left : 0 ; z-index : -1 ;} #c 2 { background-color : green ; position : absolute ; top : 0 ; right : 0 ;} #c 3 { background-color : blue ; } #d 2 { position : relative ;  top : -10px ; z-index : 2 } #d 2 .c 1 { position : static ; background-color : yellow;}

三、简要总结

	脱离文档	原占位保留	清除方式	z-index属性
浮动(float)	是	否	clear:both	不支持
相对定位(relative)	否	是	position:static	支持
绝对定位(absolute)	是	否	position:static	支持
固定定位(fixed)	是	否	position:static	支持