一、定义
指定一个元素在文档中的定位方式
1.static 没有定位，元素正常的出现在文档流中；
2.relative 相对定位，针对自己正常位置进行定位；
3.absolute 绝对定位，相对于第一个非static的父元素进行定位，经常搭配relative定位的父元素使用（父相子绝）；
4.fixed 绝对定位，以浏览器窗口定位，常用于固定到浏览器上的工具栏。
二、示例
1.relative
.main{ background-color: #ccc; }
.position-relative{ width: 100px; height: 100px; background-color: #000; position: relative; top: -10px; left: 10px; }
<div class="main"> <div class="position-relative"></div> </div>
2.absolute
.main{ background-color: #ccc; position: relative; }
.position-absolute{ position: absolute; width: 100px; height: 100px; background-color: yellow; top:0; }
<div class="main"> <div class="position-absolute"></div> </div>
注意：absolute脱离了正常的文档流，父元素的高度并没有被子元素撑开；
3.fixed
.position-fixed{ width: 100px; height: 100px; background-color: #ccc; position: fixed; top: 10px; right: 10px; }
<div class="position-fixed"></div>
