![](https://img2020.cnblogs.com/blog/1877004/202010/1877004-20201007170049655-47652063.png)
![](https://img2020.cnblogs.com/blog/1877004/202010/1877004-20201007170114147-310004498.png)
![](https://img2020.cnblogs.com/blog/1877004/202010/1877004-20201007170124793-1045836236.png)
![](https://img2020.cnblogs.com/blog/1877004/202010/1877004-20201007170137367-1906348399.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层叠上下文的创建-案例解析</title>
</head>
<body>
<!-- 【z-index:auto,所以没有产生层叠上下文】 -->
<!-- 案例解析一 -->
<div style="position:relative; z-index:auto;">
<img src="images/mm1.jpg" style="position:absolute; z-index:2; margin-left: 50px;">
</div>
<div style="position:relative; z-index:auto;">
<img src="images/mm2.jpg" style="position:relative; z-index:1;">
</div>
<hr>
<!-- 案例解析一 -->
<div style="position:relative; z-index:0;">
<img src="images/mm1.jpg" style="position:absolute; z-index:2;">
</div>
<div style="position:relative; z-index:0;">
<img src="images/mm2.jpg" style="position:relative; z-index:1; margin-left: 50px;">
</div>
</body>
</html>
![](https://img2020.cnblogs.com/blog/1877004/202010/1877004-20201007170843158-128131106.png)