CSS之绝对定位与相对定位的区别

二：相对定位

position: relative

相对定位：相对位置的坐标参考系是以自己上一次的位置（x，y）作为原点（0，0）。

注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
    #div1 {
        width:150px;
        height:200px;
        background:green;
        position:relative;
        left:100px;}
    #div1 span {
        position:relative;
        width:20px;
        height:60px;
        line-height:20px;
        background:blue;
        right:-20px;/*相对定位：以它最初的位置为准，因为div是它的父类，所以它最初位置是在div1内，然后现在会在div1内部距离右边20px，距离div顶部70px处出现span */
        top:70px;}

效果图：

注意：position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式进行显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，再单独设置display:inline; display:block都是无效的。