香草逸荷

在使用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），数值越大表示拥有的优先级越高。该属性只对使用了定位的元素有效。

示例：

html代码：

<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代码：

#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;}

三、简要总结