<div style="height: 100px;width: 100px;background-color: yellow;">2</div>
<div style="height: 100px;width: 100px;background-color: red;">3</div>
<div style="height: 100px;width: 100px;background-color: blue;">4</div>
我们看看加上top会怎么样
<div style="height: 100px;width: 100px;background-color: yellow;">2</div>
<div style="height: 100px;width: 100px;background-color: red;position: relative;top: 80px;">3</div>
<div style="height: 100px;width: 100px;background-color: blue;">4</div>
看看Bottom
<div style="height: 100px;width: 100px;background-color: yellow;">2</div>
<div style="height: 100px;width: 100px;background-color: red;position: relative;bottom: 80px;">3</div>
<div style="height: 100px;width: 100px;background-color: blue;">4</div>
//如果button和top都写只会留下top的效果
总结relative也可以使用top bottom,且自身盒子可以达到在不脱离文档流的情况下,移动内部内容的位置,可以说是绝对定位的一种简单版本