一、相对定位
相对于原来正常文档流的自己定位，会在此元素本来位置留下空白
<div id="div1"></div>
#div1{
width：200px；height:200px;
border:2px solid #f00;
position:relative;
left:100px;
top:100px;
}
二、绝对定位
将元素从文档流拖出来而就不会再占用原来元素的空间了，不会再原来元素本来位置留下空白
<div id=div1>
<span>我叫div1</span>
</div>
<div id=div2>
<span>我叫div2</span>
</div>
#div1{
margin-left:100px;
width:200px;height:100px;
border:2px solid #ff0099;
position:absolute;
设置相对定位
}
#div2{
width:200px;height:100px;
border:2px solid #ff0099;
不设置定位
}
三、固定定位
它是浮在页面中，不会滚动条进行滚动
<div id="div1">我叫div1</div>
<p>固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位固定定位</p>
#div1{
width:100px;height:100px;
border:2px solid #ff0033;
position:fixed;
left:200px;
top:200px;
}
