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

一：绝对定位

position: absolute

绝对定位：绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。

绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。

    #div1 {
        width:150px;
        height:200px;
        background:green;
        position:absolute;
        left:100px;}/*由于div1没有已定位的祖先元素，因此此处div1的位置是以body为准*/
    #div1 span {
        position:absolute;
        width:20px;
        height:60px;
        line-height:20px;
        background:blue;
        right:-20px;/*绝对定位：以父类的位置为标准，也就是以div的位置为准，会在div1右边的20px出现span */
        top:70px;}

效果图：

 

二：相对定位

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都是无效的。