静态定位 - static

静态定位是css中的默认定位方式，也就是没有定位。在此定位方式中设置：top，bottom，left，right，z-index 这些属性都是无效的。

相对定位 - relative

	<style>
        div{
            position: relative;
            background-color: red;
            border-top:1px solid #000  
        	}
    </style>

	 <style>
        div{
            position: relative;
            background-color: red;
            border-top:1px solid #000;
            top: 30px;
	        left: 30px;
        	}
    </style>

相对位置后的位置：

可以看到该元素向右下各偏移了30px.
相对定位的特点就是元素本身在文档流中的占位不变，无形的东西就是B元素在文档流中的占位，这也是为什么C元素不会浮动过去的原因。可以想象成B元素的本体依然处于普通文档流中，它的替身在参照本体进行移动。

绝对定位 - absolute

绝对定位是参考父元素的相对定位来实现的：

 #A{
            position: relative;
            background-color: red;
            border-top:1px solid #000;
            height: 300px;
            width: 300px;
            /* left: 30px;
            top: 30px; */
        }
        #B{
            position: absolute;
            background-color: rgb(17, 255, 0);
            border-top:1px solid #000;
            height: 100px;
            width: 100px;
            left: 30px;
            top: 30px;
        }

可以看出绿色div是以红色为定位位移30px，为了验证他是以父级进行定位，我们改变父级的位置：

 #A{
            position: relative;
            background-color: red;
            border-top:1px solid #000;
            height: 300px;
            width: 300px;
            left: 30px;
            top: 30px;
        }
        #B{
            position: absolute;
            background-color: rgb(17, 255, 0);
            border-top:1px solid #000;
            height: 100px;
            width: 100px;
            left: 30px;
            top: 30px;
        }