<!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>
