css属性 position:规定元素的定位类型（即选择哪种定位方式）。
提示：这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
positon的值：
1.1默认值：static，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
在positon值为static时，定义属性top, bottom, left, right 或者 z-index不起作用。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>详解css属性position</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div style="position:static; left:100px; bottom:100px; 120px; height:120px; background-color:#993;">
<div style="position:absolute; left:100px; top:100px; 100px; height:100px; background-color:#CCC;"></div>
</div>
</body>
</html>
看看页面效果：
可以看出属性：left:100px; bottom:100px;，没有起作用；
1.2position:inherit;
规定应该从父元素继承 position 属性的值。
提示：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
1.3position:relative;
生成相对定位的元素，相对于自己最近的定义了属性positon(默认值：static不可以)的父类元素进行定位，left:20px;就会相对于自己最近的定义了属性positon的父类元素的左边偏移20像素。
看看实例：
1.3.1 相对于自己最近的定义了属性positon的父类元素，positon:fixed;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>详解css属性position</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div style="position:fixed; left:100px; bottom:100px; 120px; height:120px; background-color:#993;">
<div style="position:relative; left:100px; top:100px; 100px; height:100px; background-color:#CCC;"></div>
</div>
</body>
</html>
页面效果：
1.3.2相对于自己最近的定义了属性positon的父类元素，positon:relative;
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>详解css属性position</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div style="position:relative; left:100px; bottom:100px; 120px; height:120px; background-color:#993;">
<div style="position:relative; left:100px; top:100px; 100px; height:100px; background-color:#CCC;"></div>
</div>
</body>
</html>
页面效果：
1.3.3相对于自己最近的定义了属性positon的父类元素，positon:relative;
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>详解css属性position</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div style="position:absolute; left:100px; bottom:100px; 120px; height:120px; background-color:#993;">
<div style="position:relative; left:100px; top:100px; 100px; height:100px; background-color:#CCC;"></div>
</div>
</body>
</html>
页面效果：
1.4position:fixed;
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
1.5position:absolute;
生成绝对定位的元素，相对于自己最近的定义了属性positon(默认值：static不可以)的父类元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。和1.2差不多，详细的可以看1.2 的解释。