相对定位Position：relative

      设置了位移属性（Top，right，bottom，left）的相对定位元素，他在页面中仍然是正常的、静态的，仍属于自然流。在这种情况下，其他元素不会占用相对定们元素当初的位置。此外，其他元素没有进行位置移动时，相对定位元素可能会和其他元素重叠。

Html：

 

<div class="box-set">
        <div class="box box-1 ">Box 1</div>
        <div class="box box-2">Box 2</div>
        <div class="box box-3">Box 3</div>
    <div class="box">Box 4</div>

CSS：

 

 

.box-set {
  background: #e8eae9;
}
.box {
  background: #8ec63f;
  height: 80px;
  position: relative;
  width: 80px;
}
.box-1 {
    top: 20px;
  }
.box-2 {
  left: 140px;
}
.box-3 {
  bottom: -10px;
  right: 10px;
}

效果：