1、关于css渲染
在没有指定z-index的时候，定位元素要晚于非定位元素渲染，这样使得定位元素拥有更高的显示层级。
例子：当鼠标悬乎事件时注意变化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>css渲染</title>
<style>
.container {
200px;
margin: 100px auto;
}
.container>div {
200px;
height: 80px;
color: #fff;
text-align: center;
margin-top: -30px;
}
.container>div:first-child {margin-top: 0;}
.f1 { background-color: #999; margin-left: 20px;}
.f2 { background-color: red; margin-left: 40px;}
.f3 { background-color: green; margin-left: 60px;}
.f4 { background-color: blue; margin-left: 80px;}
.f5 { background-color: pink; margin-left: 100px;}
.f3:hover { position: relative;}
</style>
</head>
<body>
<div class="container">
<div class="f1">第1个DIV</div>
<div class="f2">第2个DIV</div>
<div class="f3">第3个DIV</div>
<div class="f4">第4个DIV</div>
<div class="f5">第5个DIV</div>
</div>
</body>
</html>我们来看效果图
没有渲染定位元素之前：
渲染定位元素时是在之后的：