绝对定位(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。