position：
定位，元素的定位与这五个属性相关。left,top,bottom,right,z-index
1. static （默认值）。没有定位，五个属性都不起作用。
2. inherit 继承父类定位，IE不支持
3. relative 相对的，即相对于元素的正常位置，五个属性都起作用。
<style type="text/css">
.div1{
padding:10px 0px;
width:200px;
height:50px;
background-color:green;
margin:5px;
}
.relativeTest{
width:300px;
position:relative;
left:10px;
top:-15px;
background-color:red;
z-index:-1;
}
</style>
</head>
<body>
<div class="div1">
zhangsan
</div>
<div class="relativeTest">lisi</div>
</body>
加入position:relative ，属性left和top的值就会参照相对于第一个div的最下端位置偏移。当偏移top负值则向上出现于第一个div重叠的现象。
这个时候就要设置 z-index:[数字],来设置上下关系。
relative虽然位置移动了，但原先的位置还是保留的，下一个元素不会侵占此部分。
4. fixed 即相对于屏幕的正常位置，五个属性都起作用。
这个position:fixed;指明五个属性相对于浏览器屏幕的位置。不会随着文档的移动而移动。因是浮动到屏幕的，因此就没有父元素一说，因此width:100%就不起作用，变为inner-block.
5. absolute 绝对定位 即相对于具有position为(absolute,relative,fixed的父级元素而言)的正常位置，五个属性都起作用。
absolute的绝对，指从当前元素往上查找第一个带有position为(absolute,relative，fixed）的元素作为包裹元素进行定位，找不到则以html为包裹元素。
因为有浮动性，因此width:100%将不起作用，以找到有position的父级元素为准。
题外： float:**;
float是相对于包裹的父级block元素而言，内部元素失去block，变为一个挨着一个，根据排列规则是left还是right的浮动元素，失去原有的位置。
后续的元素将占据当前元素的位置。因此需要通过clear:both，占据当前位置。
<style type="text/css">
.flo{
float:right;
padding:5px;
} .clear{
clear:both;
}
<style> <div class="aaa">
<div class="flo">1</div>
<div class="flo">2</div>
<div class="flo">3</div>
<div class="flo">4</div>
<div class="clear"></div>
</div>
<div>5666</div>