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
浙公网安备 33010602011771号