DIV+CSS排版里的绝对定位position

上一篇我们说到了通过 Float、Display等方法进行同行并排的排版方法,今天我们来说说绝对定位Position。

官方的定义和用法
Position 属性规定元素的定位类型。

说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

Position相关知识我们就不在这里阐述了,感兴趣的朋友请自行查阅,回到正题如何利用position来定位排版呢?

首先,我们要给div的父级相对定位,代码如下:

position:relative;

接下在需要排版的div的子级绝对定位,代码如下:

position:absolute;

切记,无论是相对定位、还是绝对定位的div,都需要给高度和宽度设置数值。

需要排版的div定好位后,只需要设置上、下、左、右距离的绝对值就可以了,下面以左右两个DIV为例,代码如下:

<style type="text/css">
#box{
width:600px;
height: 300px;
position:relative;
}
#leftDiv {
width: 300px;
height: 300px;
position: absolute;
left: 0px;
top: 0px;
}
#rightDiv {
width: 300px;
height: 300px;
position: absolute;
top: 0px;
right: 0px;
}
</style>
<div id="box">
<div id="leftDiv">左边"leftDiv" 的内容</div>
<div id="rightDiv">右边"rightDiv" 的内容</div>
</div>

我们来看看,为了效果明显添加了背景色:

左边”leftDiv” 的内容
www.zhuei.com
右边”rightDiv” 的内容
www.zhuei.net