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 {
width: 200px;
margin: 100px auto;
}
.container>div {
width: 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>我們來看效果圖
沒有渲染定位元素之前：
渲染定位元素時是在之後的：
