postion,float

  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）

1. 元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。

2. 同时给元素设置float和absolute，则float失效

3. 第一个元素应用了position:absolute之后会覆盖着接下来的float元素（如果两个元素所处的位置相同）,float元素位于下方

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!