以下例子全是基于chrome游览器
absolute是绝对定位，基于第一个非static的父元素进行定位
relative是相对定位，基于其正常位置进行定位
1.relative定位的元素，top与margin-top的区别
- 相对定位元素使用top,right,bottom,left进行定位时，视觉效果中元素位置虽然已经改变，但是不会影响其原有的位置，其它元素还是基于其原来的位置进行定位，直接上例子
<style type="text/css">
.s1{
position:relative;
width: 100px;
height: 100px;
top: 100px;
background: red;
}
.s2{
width: 200px;
height: 200px;
background: yellow;
}
</style>
<body>
<div class='s1'>
</div>
<div class="s2">
</div>
</body>
效果图
可以看到，使用top的时候，紫块(相对元素)在视觉上位置虽然改变了，但是其原有的位置是没有变化的，所以其黄色块的位置是跟在其原有的位置。
2.相对元素使用margin进行定位，则视觉位置与原有位置是相同的，以下是例子
<style type="text/css">
.s1{
position:relative;
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
}
.s2{
width: 200px;
height: 200px;
background: yellow;
}
</style>
<body>
<div class='s1'>
</div>
<div class="s2">
</div>
</body>
使用margin-top时，原有位置与试图位置相同，则直接在其后面显示。
2.相对布局中，第一个子元素使用margin-top
<style type="text/css">
html{
background: white;
}
body{
position: relative;
background: wheat;
}
.s1{
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
}
.s2{
width: 200px;
height: 200px;
background: yellow;
position: absolute;
}
</style>
<body>
<div class='s1'>
</div>
<div class="s2">
</div>
</body>
上图可知，body与static元素却在同一行位置，absolute元素跟在其后面。当时去找了相关margin的相关介绍，如下
1.所有毗邻的两个或更多盒元素的margin将会合并为一个margin进行共享。(毗邻的元素:同级或嵌套的盒元素，它们之间没有非空、border或padding分隔)
body中的第一个子元素有一个margin-top为100px，满足上述条件，所以margin会进行共享，margin的共享机制是1.同为正选取最大的。2.同为负选取绝对值最大的。3.一正一负则相加。因此body与第一个子元素共享margin-top为100px，所以在同一位置，距离顶部100px。
2.absolute元素在static后面的原因，查看资料如下:
如果子元素设置成了定位元素，但是没有设置top,left等值，那么就相当于定位仅仅是从标准流脱标了，对于margin与padding对其得位置影响，可以理解为，其实子元素没有脱标。
大概就是设置了定位元素，还在其原来的位置，可以设置margin值，margin值是基于原来位置进行定位的，但是已经脱离了文档流，只有设置了top等值，才算真正意义上得脱离文档流，根据祖先的第一个非static元素进行定位。如果不设置top等值的位置信息，绝对定位的元素不计算到父元素的内容里面，是脱离了父元素的内容，但是位置关系还存在(因为没有设置位置信息)。
以下是个例子。
<body>
<div class="s1">s1</div>
<div class="s2">s2</div>
<div class="s3">s3</div>
</body>
body{
position:relative;
}
.s1 {
height: 200px;
background-color: yellow;
/* margin-left: 200px; */
}
.s2 {
width: 200px;
height: 200px;
background-color: red;
margin-top:50px;
position: absolute;
}
.s3{
height: 200px;
background-color: blue;
}
效果图如下
还有个问题是，如果第一个子元素设置成Inline-block与inline，进行测试 inline-block
这个是因为第一个元素变了BFC，不会与父元素发生margin重叠。
inline
内联元素没办法设置width与height
3.如果body父元素设置了overflow:hidden
IE上面
Chrome上面
注意ie与chromed的区别
4.如果父元素为div时，overflow:hidden的影响
div不加overflow:hidden
div加overflow:hidden,第二个子元素为absolute
因为absolute元素没有设置top等值，absolute元素不计算到父元素的内容里面，但是位置信息还是原本的位置信息，所以会被隐藏。
注意一下，此时的margin并没有合并，这是因为父元素使用了overflow:hidden，会变成BFC(块级格式上下文)，此时内部的block元素的垂直方向距离由margin决定，父元素并不会与子元素的margin进行合并。
第二个子元素为relative
relative元素不设置top等值，还在内容里面。
IE与chrome一致，当父元素div设置了overflow:hidden时，margin的满足条件将不会满足，所以会出现上述情况。
5.父元素设置定高与overflow:hidden，子绝对定位元素设置top
父元素为body元素
<style type="text/css">
html{
background: white;
}
body{
position: relative;
background: wheat;
overflow: hidden;
height: 200px;
}
.s1{
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
}
.s2{
width: 200px;
height: 200px;
top: 100px;
background: yellow;
position: absolute;
}
</style>
<body>
<div class='s1'>
</div>
<div class="s2">
</div>
</body>
当父元素为div时
<style type="text/css">
html{
background: white;
}
/* body{
position: relative;
background: wheat;
overflow: hidden;
height: 200px;
} */
.s3{
position: relative;
overflow: hidden;
height: 200px;
background: wheat;
}
.s1{
width: 100px;
height: 100px;
margin-top: 100px;
background: red;
}
.s2{
width: 200px;
height: 200px;
top: 100px;
background: yellow;
position: absolute;
}
</style>
<body>
<div class="s3">
<div class='s1'>
</div>
<div class="s2">
</div>
</div>
</body>
结果图
当父元素为body时,overflow:hidden是不起效果，但是父元素为div时，设置overflow:hidden后，如果相对布局的元素在父元素之外，会隐藏。
如果以上有错误，欢迎大佬指导或补充。
