绝对定位(absolute)与相对对位(relative)的区别从字面上很容易理解，但在布局应用中确经常让人难以琢磨，总是让人不尽人意，达不到意想的效果。罪魁祸首只能归罪于各种浏览器对标准的兼容性各不相同，真是五花八门。
首先默认的各个元素应该是相对定位，但我们应该知道，给元素添加relative与不添relative是有区别的。
通过一个例子来理解下它们的区别吧： 假如有一个元素div（把它作为父元素），它的样式定义：
div {position:relative;
margin:10px;
border:10px red solid;
padding：10px;
}
然后它有一个子元素 div,这个子元素的样式定义为：
div {position:absolute;
left:0;
width:100px;
height:100px;
background-color:blue;
}
子元素使用的是绝对定位，意思就是相对于父元素的绝对定位，假如父元素不指定为relative属性，那么这个子元素就是型对于整个浏览器的窗口定位了。
在这个例子里，对IE和firefox，它们不是显示在相同的位置上；在firefox里，父元素的边框与内边距交界处就是0位置。而在IE里，0位置是在内边距和内容区域的交界处。
因此要使相对于父元素（这个元素必须指定为relative属性）的绝对定位（子元素指定为absolute属性）在IE和firefox里位置相同，解决的办法就是父元素的相应padding值必须设为0。
以div标签为例说明：
