堆叠上下文
层/堆叠上下文（stack content） 他是一块区域，这块区域由某个元素创建 规定了该区域中内容在z轴上排列先后顺序
创建堆叠上下文的元素
- HTML元素（根元素）
- 设置z-index数值的定位元素（非auto值）
同一个堆叠上下文中元素在z轴上排列
从后到前的排列顺序：
-
创建堆叠上下文的元素的背景和边框
-
堆叠级别(z-index stack level)为负值的堆叠上下文
-
常规流非定位的块盒
-
非定位的浮动盒子
-
常规流非定位行盒
-
任何 z-index 是auto的 定位子元素，以及z-index是0的堆叠上下文
-
堆叠级别为正值的堆叠上下文
每个堆叠上下文，独立于其他堆叠上下文，他们之间不能相互穿插
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
background-color: lightblue;
}
.c1{
position: relative;
z-index: 0;
height: 200px;
width: 200px;
background-color: #008c8c;
}
.c2{
position: absolute;
z-index: -1;
height: 200px;
width: 200px;
background-color: chocolate;
left: 100px;
top: 100px;
}
.item1,.item2{
position: absolute;
width: 100px;
height: 100px;
}
.item1{
right: -50px;
bottom: -50px;
}
</style>
</head>
<body>
<div class="c1">
<div class="item1" style="background-color: red;"></div>
<div class="item2"></div>
</div>
<div class="c2">
<div class="item1" style="background-color: rgb(122, 8, 8);"></div>
<div class="item2"></div>
</div>
</body>
</html>
对item1设置z-index不管用，因为视为整体，整体排列，统一设置外层