一：绝对定位
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右边的20px出现span */
top:70px;}效果图：
注意：position:absolute，float会隐式地改变display的类型（display：none除外）。即是当元素设置position:absolute、float:left、float:right中任意一个时，都会让元素以display:inline-block的方式进行显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，再单独设置display:inline; display:block都是无效的。