任鸟飞网站设计博客

position属性和float属性一起控制页面的布局，并通过z-index控制元素在页面垂直方向的排列顺序。

控制页面浮动方式的float属性包含下面4种值:
position:
{absolute|fixed|relative|static|inherit}
代码

   <div class="box-wrap">
   <div class="box-inner-1">box1</div>
   <div class="box-inner-2">box2</div>
   <div class="box-inner-3">box3</div>
</div>

样式代码如下：

body{
	line-height: 160%;
	width: 468px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
	background-color: #003366;
}
//定义外框box-wrap
.box-wrap {
   background-color: #FFFFFF;
   float: left;
   width: 460px;
   height: 300px;
   position: relative;//相对定位
    }
//定义内框1 box-inner-1
.box-wrap .box-inner-1 {
   background-color: #CCCCFF;
   height: 120px;
   width: 200px;
   border: 5px dashed #333333;
   margin: 10px;
   }
//定义内框2 box-inner-2
.box-wrap .box-inner-2 {
   background-color: #3366CC;
   width: 100px;
   height: 100px;
   position: absolute;//绝对定位
  left: 80px;
   top: 80px;
   border: 5px dashed #333333;
   }
//定义内框3 box-inner-3
.box-wrap .box-inner-3 {
   background-color: #FF0033;
   height: 120px;
   width: 200px;
   border: 5px dashed #333333;
   margin: 10px;
   }

• absolute ：绝对定位。 相对已定义的父级块元素来绝对定位，绝对定位元素的位置与文档流无关，因此不占据空间，普通流中的其他元素不受绝对定位元素的影响。 提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
• relative ：相对定位。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。  提示：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
• fixed ：固定。相对根元素的位置来绝对定位，可以指定left | right | top | bottom 属性。
• static ：静态。在文档流中不定位，left | right | top | bottom | z-index 属性都将被忽略。
• inherit：继承。继承上一特性。