hanleisheshou

 

absolute 与 relative

div的相对布局和绝对布局
相对布局(position:relative)
相对布局需要结合top,bottom,left,right四个属性来使用
例如:
<div id="div1" class="css1"></div>
<div id="div2" class="css2"></div>
这两个div 在浏览器中上下排列,若css1如下设置
.css1
{
 position:relative;
 top:20px;
}
则 div1 会在屏幕中向下移动20px,但div2在浏览器中的的位置不会改变。若想让div2 也向下移动20px,则要如下设置
.css2
{
 position:relative
 top:20px;
}
div相对位置的定位不会受制于父div的位置的影响。
根据浏览器四个边框进行定位。
绝对位置定位(position:absolute)
使用绝对定位一个div1,该div1对周围的任何div的位置都没有影响

relative 和 absolute 的配合使用
可以让 子div 根据 父div 进行调整
<div class="cssAll">
 <div class="css1"></div>
 <div class="css2"></div>
</div>

cssAll 用relative定义,而
css1 和 css2 用absolute

posted on 2010-04-26 15:45  林庆河  阅读(288)  评论(0)    收藏  举报

导航