注意，'top','right','bottom','left'这四个属性对于static定位的元素无效。因此，我们说top等的含义时，就是在讲这些属性在相对定位和绝对定位下的含义。
绝对定位下，这四个属性的含义就很不一样了。
这里要解释一下俩个概念：top margin边 和包含块的概念。
我们都知道，每个盒子都由内容、内边距、边框和外边距组成。外边距区域最顶部的位置就是top margin 边，最底部的位置就是bottom margin边。
包含块的概念：元素盒子的位置和大小有时是根据一个特定矩形计算的，叫做该元素的包含块。
对于绝对定位的元素，它的包含块就是由最近的已经定位的祖先元素创建。如果没有这样的祖先，包含块就是根元素所在的包含块。
首先来看一个案例：
.bottom-box{
margin -top:30px
}
我设置了margin-top属性，我的上边距应该距离父元素为30px
可是结果如何呢？结果并不是class为bottom-box的div上边距离父元素30px而是距离body元素30px
什么原因呢？
当个子元素设置margin-top属性时，如何父元素没有设置padding属性，即padding属性为0，那么会出现以上这个情况。
再来看一个实例：
http://www.manongjc.com/article/1263.html
其在IE6和IE7下显示效果为
margin:20px只有margin-bottom失效了。
解决办法：只要在浮动的最后一个元素后面加上“
.float_div{float:leftmargin:20pxwidth:100pxheight:100pxdisplay:inlinebackground-color:#CCC}
.clear{clear:both}
还有个简单点的解决方法：
IE6/7下margin-bottom无效一般出现在容器里某元素设置后在父容器内无效，这个时候只需要在父容器中加入以下两句css，基本上所有的浏览器都兼容了：
overflow:hiddenzoom:100%
这个方法不用添加额外的标签，也是很好的解决办法！
