实现某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子，我们可以利用定位来实现。

一、相对定位 relative ：
语法：

选择器{ position:relative;}

例如：
CSS代码如下：

        .box1 {
            width: 200px ;
            height: 200px ;
            background-color: rosybrown ;
        }

        .box2 {
            width: 200px ;
            height: 200px ;
            background-color: royalblue ;
        }

效果图：

加入相对定位后：

 .box1 {
            position:  relative ;
            top: 100px;
            left: 100px;
            width: 200px ;
            height: 200px ;
            background-color: rosybrown ;
        }

        .box2 {
            width: 200px ;
            height: 200px ;
            background-color: royalblue ;
        }

效果图：

总结：
1、相对于自己原来的位置移动；
2、不脱标，继续保留原来位置。

二、绝对定位 absolute ：
语法：

选择器{ position:absolute;}

例如：
CSS代码如下：

       .father {
            position:  relative ;
            width: 300px ;
            height: 300px ;
            background-color: rosybrown ;
        }
        .son {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }

效果如下：

以上例子就是我们常说的“子绝父相”：
①子级绝对定位，不会占有位置，可以放到父级盒子的任何一个地方，不会影响其他盒子；
②父级盒子需要加定位限制子盒子在父级盒子内显示；
③父级盒子布局时，需要占有位置，因此父级只能是相对定位。

绝对定位特点：
1、若没有父级元素或父级元素没有定位，则以浏览器为准定位；
2、如果父级元素有定位，则以最近一级的有定位父级元素为参考点移动位置；
3、绝对定位不占有原先位置。

定位总结：