当前位置：首页 → 问答吧 → div+css 相对定位的详解

div+css 相对定位的详解

时间：2008-09-23

来源：互联网

相对定位和绝对定位是一个非常重要的概念。对于初学者来说，理解起来比较晦涩。下面我们一起来探讨他们之间的区别。相对和绝对定位通过属性 position:relative | absolute
来设置。一个元素设置了绝对定位或相对定位后，原则上要求设定top left bottom right 中的一个属性。
我们先来看看相对定位。
相对定位是相对于元素在普通流中自身的位置来定位的。例如
<style>
#a
{
background-color:#999999;
width:200px;
height:200px;
}
#b
{
background-color:red;
width:200px;
height:200px;
}
</style>
<div id="a">DIV-a</div>
<div id="b">DIV-b</div>
效果如图.( 图一) 这是他们在普通流的位置。

我们为b增加相对定位
#b
{
background-color:red;
width:200px;
height:200px;
position:relative;
top:40px;
left:40px;
}
效果如图：

这里 top:40px; left:40px; 是相对于层b在普通流中的位置（即图一中红色位置）。距离图一红色位置上面为40px; 左边为 40px..
为了让大家更好的理解我们把层b定位修改如下：
#b
{
background-color:red;
width:200px;
height:200px;
position:relative;
top:40px;
right:40px;
}

它也是相对于层b在普通流中的位置（即图一中红色区域）。距离图一中红色区域上面为40px; 距离图一中红色区域右边为40px。所以层 b 左边有40px在屏幕外面，因此看不到。
另外，大家注意相对定位的元素对其他元素的位置不会产生影响，也就是说相对定位元素位置发生偏移后，不会挤占其他元素的位置，但能够覆盖其他元素。例如
#b
{
background-color:red;
width:200px;
height:200px;
position:relative;
bottom:40px;
left:40px;
}

它也是相对图一红色区域左边40px
底边40px
。所有顶部会有40px 与层a
重叠，但不会影响层a的位置。

作者: 刘小枪发布时间: 2008-09-23

不错。。。。。。。。

这个用的到。。
收藏之。

作者: 西门轩辕发布时间: 2008-09-23

不是太明白.,..............

作者: huchaopeng 发布时间: 2008-09-24

6666666666666666666666666666666666666