position: relative； 用法top bottom用法

 <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,且自身盒子可以达到在不脱离文档流的情况下，移动内部内容的位置，可以说是绝对定位的一种简单版本