（三）css之浮动&定位

　　众所周知，一个页面可能包含多个div，如何对这些div进行排列，以便具有较好的显示效果呢？

　　css提供了浮动和定位两个属性进行div的排列，下面主要针对浮动和定位进行详细地阐述。

　　（一）何为浮动？

　　浮动即是让div块向左或者向右靠拢，向左浮动（float:left）;向右浮动（float:right）.

　　向左或者向右浮动时，当浮动块碰到前一个块或者边框时，则停止浮动。

　　例如：1、向左浮动

　　　　　　想左浮动，即是div块向左边移动，直到div块碰到左边框或者另一个div块，如上图右侧所示，代码如下

　　　　　　html文件：

　　　　　　<!--左浮动排列-->
　　　　　　<div class="div1">
　　　　　　<div class="div21" style="height:204px;width:304px">左浮动1</div>
　　　　　　<div class="div21">左浮动2</div>
　　　　　　<div class="div21">左浮动3</div>
　　　　　　<div class="div21">左浮动4</div>
　　　　　　<div class="div21">左浮动5</div>
　　　　　　<div class="div21">左浮动6</div>
　　　　　　<div class="div21">左浮动7</div>
　　　　　　<div class="div21">左浮动8</div>
　　　　　　<div class="div21">左浮动9</div>
　　　　　　</div>

　　　　　　css文件：

　　　　　　.div1{
　　　　　　width:600px;
　　　　　　height:600px;
　　　　　　border:1px solid red;
　　　　　　margin-top:5px;
　　　　　　margin-left:5px;
　　　　　　float:left;
　　　　　　padding-top:5px;
　　　　　　padding-left:5px;
　　　　　　padding-right:5px;
　　　　　　}

　　　　　　.div21{
　　　　　　width:150px;
　　　　　　height:100px;
　　　　　　border:1px solid blue;
　　　　　　background-color:pink;
　　　　　　text-align:center;
　　　　　　float:left;
　　　　　　margin-left:2px;
　　　　　　margin-top:2px;
　　　　　　}

　      　2、向右浮动

　　　　　　向右浮动，即是div块向右边移动，直到div块碰到右边框或者另一个div块，如上图左侧所示，代码如下

　　　　　　html文件：

　　　　　　<!--右浮动排列-->
　　　　　　<div class="div1">
　　　　　　<div class="div2" id="special">右浮动1</div>
　　　　　　<div class="div2">右浮动2</div>
　　　　　　<div class="div2">右浮动3</div>
　　　　　　</div>

　　　　　　css文件：

　　　　　　.div1{
　　　　　　width:600px;
　　　　　　height:600px;
　　　　　　border:1px solid red;
　　　　　　margin-top:5px;
　　　　　　margin-left:5px;
　　　　　　float:left;
　　　　　　padding-top:5px;
　　　　　　padding-left:5px;
　　　　　　padding-right:5px;
　　　　　　}

　　　　　　.div2{
　　　　　　width:150px;
　　　　　　height:100px;
　　　　　　border:1px solid blue;
　　　　　　background-color:pink;
　　　　　　text-align:center;
　　　　　　margin-left:2px;
　　　　　　margin-top:2px;
　　　　　　}

　　　　　　#special {
　　　　　　float:right;
　　　　　　}

　　　　　　（二）何为定位？

　　　　　　只进行div块左右浮动，显然不能满足我们对网页的排版要求，这就要求我们对div的位置进行定位，利用div块的位置，进行排列。

　　　　　　div块的位置可以分为：静态位置、相对位置、绝对位置、固定位置。

　　　　　　

　　　　　　1、 针对相对定位：

　　　　　　

　　　　　　2、绝对定位

　　　　　　

　　　　　　（三）优先级的属性z-index

　　　　　　　　

　　　　　　　　 number 的值越大，优先级越高，越靠上。number的值可以为负。