内有恶犬 请勿靠近！！
一、CSS定位：垂直于屏幕方向的布局
border的外边界包围的是background
浮动元素脱离文档流，往上浮动了一点点
二、position属性
1. static
默认值，代表元素呆在文档流中
2.relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
上图可以看出，绿框样本可以看作是显示位置偏移了，黑框依旧以绿框原本位置排列
On the other hand，配合使用z-index可以调节z轴的上下位置
3.absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
所以，如果你要以某一个父元素为基准定位，就把他设置为relative。
如果不设置，就会以最初的窗口定位,如下图。
父元素设置relative后。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
3.fixed
相对于**视口（viewport）**定位
滚动 滑轮，定位依旧在视口的位置不变
应用：可以做两边固定的广告
注意：移动端不要用fixed，会有很多bug
