position:relative(相对定位)
相对定位好似一种折中的方法，是在静态定位和绝对定位中去一个平衡点，所谓相对定位就是使被应用的元素不脱离文档流，却能够通过坐标值以原始位置为参照物进行偏移。
坐标值：
top:表示定位元素顶边外壁到原始位置顶部外壁的距离
right:表示定位元素右边外壁到原始位置元素右侧外壁的距离
left:表示定位元素左边外壁到原始位置元素左侧外壁的距离
bottom:表示定位元素底边外壁到原始位置元素底部外壁的距离
XML/HTML Code复制内容到剪贴板
<div id="box">
<div id="boxA">boxA</div>
<div id="boxB">boxB
<div id="boxC">boxC</div>
<div id="boxD">boxD</div>
</div>
</div>
CSS Code复制内容到剪贴板
#box{
margin:40px auto;
width:400px;
height:400px;
border:2px red solid;
}
#boxA{
position:relative;
top:100px;
left:100px;
width:50px;
height:50px;
background: #3E7DB0;
}
#boxB{
width:50px;
height:150px;
background: #B9C8C5;
}
#boxC{
width:50px;
height:50px;
background: #1D92C8;
}
#boxD{
width:400px;
height:50px;
background: #086499;
}
大盒子box在整个网页中距顶部40px居中显示，当元素boxA由于position定义为相对定位，相对于它本身的位置的位置进行偏移，据原先的位置左100px和顶部100px，当遇到文档流boxD时，它会覆盖boxD。相对定位虽然偏离了原始位置，但是它的原始位置所占据的空间仍然保留着，并没有被其它元素所占据。
position：fixed(固定定位)
固定定位是绝对定位的一种特殊形式，它是以浏览器窗口作为参照物来定义网页元素，如果定义某个元素固定显示，则该元素不在受文档流的影响。他始终以浏览器窗口来定位自己显示的显示位置，不管浏览器窗口如何滚动，也不管浏览器窗口大小如何变化，该元素都会显示在浏览器窗口内。通俗的说就是以浏览器窗口的四条边作为坐标系来定位元素的位置。
