css的相对定位与绝对定位

css的相对定位

对一个元素进行相对定位，它将出现在它所在的位置，然后通过水平或垂直方向的设置，它会相对于它原来的位置进行移动。

例如：

    
    
    


    
box1
    
box2
    
box3

移动前的位置.png

相对定位下box2的位置

#box2{
            display: inline-block;
            height:100px;
            width:100px;
            border: 1px solid yellow;
            position: relative;
            top :40px;
            left: 40px;
        }

相对定位.png

将 top 设置为 40像素，那么框在原位置顶部下面 40 像素的地方。将left 设置为 40 像素，那么框会在原位置左边40像素的位置，也就是将元素向右下方移动。

css的绝对定位

css的相对定位，是使元素脱离文档流，不再占据位置，绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

对box2进行相对定位

#box2{
            display: inline-block;
            height:100px;
            width:100px;
            border: 1px solid yellow;
            position: absolute;
            top :40px;
            left: 40px;
        }

绝对定位.png

将box2的 top 设置为 40px，left 设置为 40 px，此元素无祖先元素，它的位置相对于最初的包含块向下40px，向右40px。效果如上图所示。