1.层模型--绝对定位:设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、 right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这 样的包含块,则相对于body元素,即相对于浏览器窗口。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
2.层模型--相对定位:设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流 中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动 了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移 前的位置保留不动。
代码实现相对于以前位置向下移动50px,向右移动100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
3.层模型--固定定位:fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗 口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
Relative与Absolute组合使用:
1、参照定位的元素必须是相对定位元素的前辈元素;
2、参照定位的元素必须加入position:relative;
3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。