position 属性是规定元素的定位类型。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
以上是w3c对与position属性的解释和说明。。。看懂了么。。好吧一开始我看的时候也是懵懵懂懂，没有实际操作过，你绝对无法模拟出他的实际效果。
我一直认为，实践是检验真理的唯一标准。所以多多实践才是王道。废话不多讲，下面来具体解析这个属性。
所有html元素的position属性的默认值是static，这个属性标志着所有元素都要遵守正常流动布局，也就是默认布局。首先我们来说说absolute这个值。
absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
<pre id="line1"><span></span><html>
<head>
<style type = "text/css">
#parentDiv{
width:100px;
height:100px;
border:1px solid blue;
margin:50px;
}
#childDiv{
width:50px;
height:50px;
border:1px solid green;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div id = "parentDiv">
<div id = "childDiv"></div>
</div>
</body>
</html>
上面我们给 childDiv 这个div设置了absolute属性并且设置了top和left
让我们看看实际效果(想看效果的直接复制上面代码保存为html文件打开即可)
childDiv使用了absolute 绝对布局方式来定位自身。设置absolute后。浏览器会寻找childdiv的父容器，也就是
parentDiv 这个div，查看这个父容器的属性是否为static，如果是static这个默认的属性，浏览器会默认寻找parentDiv
这个容器的父类，判断其是否为static，如果不是static，将依据非static这个值的容器进行定位,直到body停止,relative和absolute都可以，请看下面这个栗子
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
#parentDiv{
width:100px;
height:100px;
border:1px solid blue;
margin:50px;
position:relative;//新增定位属性
}
#childDiv{
width:50px;
height:50px;
border:1px solid green;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div id = "parentDiv">
<div id = "childDiv"></div>
</div>
</body>
</html>上面这个栗子。。childDiv他定位依赖的容器就是parentDiv!
fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom"
属性进行规定。
这个属性很容易就能弄懂。设置fixed后，当前元素永远都会根据body来定位。在此不做代码演示
relative:生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
这个属性也很容易理解，他与absolute是不同的，absolute会寻找父容器来判断是否依赖定位。但是这个不会
父容器，他会依赖与自己本身在正常流定位的位置然后偏移，可以看下面这个栗子
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
#parentDiv{
width:100px;
height:100px;
border:1px solid blue;
margin:50px;
}
#childDiv{
width:50px;
height:50px;
border:1px solid green;
position:relative;
top:20px;
left:20px;
}
</style>
</head>
<body>
<div id = "parentDiv">
<div id = "childDiv"></div>
</div>
</body>
</html>这个栗子其实是文章第一个栗子的修改版。。只修改了childDiv的position属性和偏移值,在上面的栗子中我们可以
看出，childDiv依赖与原先的位置偏移了位置，读者可以修改parentDiv的定位属性来查看效果
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
默认值。。你懂的。。在此不多做介绍
inherit：规定应该从父元素继承 position 属性的值。
继承父类的position属性，基本不用，因为你不知道父类容器的定位属性会在何种需求下更改，可能会导致
意想不到的惊喜。。。所以一般建议不要使用
