<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.father{width:300px;height:300px;background:green;}
.son1{position:absolute;z-index:10;width:200px;height:200px;background:yellow;}
.son2{position:absolute;z-index:9;width:250px;height: 250px;background:pink;}
.grand-s1{position:absolute;width:100px;height:100px;z-index:2;background:red;}
.grand-s2{position:absolute;width:200px;height:100px;z-index:1;background:blue;}
</style>
</head>
<body>
<div class="father">
<div class="son1">
<div class="grand-s1"></div>
<div class="grand-s2">
<img src="data:images/nav1.jpg" alt="">
</div>
</div>
<div class="son2"></div>
</div>
</body>
</html>
效果：
grand-s1,grand-s2的层级是包含的父级的权重。
总结：z-index设置的是已定位的兄弟元素的层次叠放顺序。