<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width">
JS Bin
.a{
width: 300px;
height: 300px;
border: 1px solid;
position: relative;
padding-top: 10px;
}
.b{
width: 100px;
height: 100px;
border: 1px solid red;
position: absolute;
top:100px;
left:100px;
}设置如上结构，b是a的子元素，b采用绝对定位，因为给b采用绝对定位，脱离了文档流，所以给父元素a设置padding对b的位置不产生任何影响。
如果给b元素设置margin，那么b的位置会改变
浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了position的元素相比浮动元素并不会遮盖后一个元素。
浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）
元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。
同时给元素设置float和absolute，则float失效
第一个元素应用了position:absolute之后会覆盖着接下来的float元素（如果两个元素所处的位置相同）,float元素位于下方
