堆叠上下文

层/堆叠上下文（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不管用，因为视为整体，整体排列，统一设置外层