CSS Position页面布局属性详解

作者:     目录: PHP+MySQL     发表: 2009年11月20日

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

发表评论