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

<divid="demo">

<divclass="column c1">column1</div>

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

<divclass="column"id="c2">column2</div>

<divclass="column"id="c3">column3</div>

</div>

<divid="d2">

<divclass="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;  }

.c1{background-color:red;position:absolute;top:0;left:0;z-index:-1;}

#c2{background-color:green;position:absolute;top:0;right:0;}

#c3{background-color:blue; }

#d2{position:relative; top:-10px;z-index:2}

#d2.c1{position:static;background-color: yellow;}

三、简要总结

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