css层叠上下文1、什么是"层叠层叠上下文"？html中一个三维的概念，在css2.1规范中，每个盒模型的位置都是三维的

1、什么是"层叠层叠上下文"？

html中一个三维的概念，在css2.1规范中，每个盒模型的位置都是三维的，分别是平面画布的x轴，有轴以及表示层叠的z轴，一般情况下，元素在页面上沿x轴y轴平铺，我们察觉不到它们在z轴上的层叠关系，而一旦元素发生堆叠，这是就能发现某个元素可能覆盖另一个元素或者被另一个元素覆盖

用代码来演示吧

2.如何产生"层叠上下文"

文档中层叠上写文由满足任意条件的元素形成：

HTML中的根元素本身j就具有层叠上下文，称为“根层叠上下文”
opacity属性值小于1的元素
position：fixed
z-index为0
transfoem属性值不为""none"元素

   <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            border: 1px solid black;
            height: 200px;
            background: white;
            position: relative;
            z-index: 0;
        }

        .a {
            position: relative;
            z-index: 1;
            border: 1px solid red;
        }

        .a2 {
            position: absolute;
            z-index: 10;
            height: 50px;
            width: 50px;
            background: red;
        }

        .b {}

        .b2 {
            position: absolute;
            z-index: 5;
            height: 50px;
            width: 50px;
            top: -20px;
            background: blue;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="a">1
            <!-- 每个层叠上下文就是一个新的小世界（作用域） -->
            <!-- 这个小世界里面的z-index跟外界无关 -->
            <div class="a2">10</div>
        </div>
        <div class="b">
            <!-- 处于同一个小世界的z-index才能比较 -->
            <div class="b2">5</div>
        </div>
    </div>
</body>