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:继承。继承上一特性。