HTML中的层级
总结：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。定位高于浮动，浮动高于标准流。（高低和占不占位置无关）
用法：
- 必须有定位。（除去static之外）。
- 给定z-index的值为层级的值。（不给默认为0）
（层级为0的盒子，也比标准流和浮动高。）
（层级为负数的盒子，比标准流和浮动低。）
（层级不取小数）
（层级一样，后面的盒子比前面的层级高。）
（浮动或者标准流的盒子，后面的盒子比前面的层级高。）
定位中：abselute是不占位置的，relative是站位的的。而层级的高低，是和占不占位置没有关系的。
层级关系
DEMO
没有设置层级关系，后边的li层级比前边的li高
<style>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px auto;
width: 1000px;
list-style: none;
}
li {
width: 190px;
height: 300px;
float: left;
margin-left: -1px;
border: 1px solid #ccc;
}
li:hover {
border: 1px solid #f40;
}
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
添加层级之后
li {
width: 190px;
height: 300px;
float: left;
margin-left: -1px;
border: 1px solid #ccc;
position: relative;
z-index: 1;
}
li:hover {
border: 1px solid #f40;
z-index: 2; //鼠标浮动在上面时，层级变为2，最高
}
