堆叠（栈）上下文

堆叠（栈）上下文 （stack context）

由某个元素创建的一块独立区域，规定了该区域中的内容在z轴上（z-index ）的排列的先后顺序。（类似bfc）

创建堆叠（栈）上下文（stack context）的元素

1. 根元素（html）

2. 定位元素设置了z-index!=auto(z-index=auto不能创建stack context,position=relative/absolute/fixed都是定位元素的依据)

同一个stack context中元素的层次高低排列规则

从视觉靠后到视觉靠前的排列顺序

关于z-index：只有定位元素有效，对于常规流和浮动流无效

1. 创建stack context的元素的背景和边框
2. 级别(z-index,stack level)为负值的stack context
3. 常规流非定位（position:static）的块盒
4. 非定位的浮动盒
5. 常规流非定位行盒
6. 任何 z-index=auto的定位子元素，以及z-index=0的stack context
7. 级别为正值的的stack context

extra:

• 相同时按照书写顺序靠后的覆盖前面的(即后写的越靠近用户)
• z-index默认为auto
• z-index=auto 层级约为z-index=0
• 每一个stack context 独立于其他stack context ，context内部元素无法影响到外部

 <!-- 
html的stack context下的排列层级：
    第一层：html创建的stack context作为底层
    第二层：.wrapper-back ：position:relative;z-index:-1;stack context's level 负数级别-1
    第三层：p.passage：非定位常规流块盒
    第四层：div.floatbox：非定位浮动盒
    第五层：p.passage的子元素文字：内部的匿名常规流非定位行盒
    第六层:.wrapper-middle ：position:relative;z-index:auto;
    第七层: .wrapper-top :position:relative;z-index:0;
    第八层：.wrapper-over :position:relative;z-index:1; stack context's level 正数级别1
    第九层：.wrapper-middle > .testmiddle :position:absolute;z-index:2;stack context's level 正数级别2
    (.testmiddle 也是位于html所在的stack context,它的父元素（.wrapper-middle）未形成自己的stack context)

extra：相同层的看书写顺序（后写的高于先写的）
 -->

    <p class="passage" style="padding-left:20px;background-color:lightblue;color:red;font-weight:bold;">
        lorem ipsum dolor sit amet, consectetur adipisicing elit. unde,
        suscipit aspernatur dolore doloribus quibusdam distinctio nulla fugiat adipisci,
        in nesciunt eaque error expedita quae vero sint illo dolores voluptas nemo!
        debitis quas enim, nemo non quos sed beatae. aperiam, fuga?</p>

    <div class="floatbox" style="float:left;width:800px;background-color:rgb(43, 255, 0);margin-top:-40px;">
        float
    </div>

    <div class="wrapper-back"
        style="position:relative;z-index:-1;left:80px;top:-100px;width:200px;height:200px;background-color:rgb(88, 46, 253);">
        <div class="testleft" style='width:100px;height:100px;background-color:red;position:absolute;z-index:6;'>
            wrapper-back</div>
    </div>


    <div class="wrapper-middle"
        style="position:relative;z-index:auto;top:0px;width:300px;height:200px;background-color:rgb(10, 0, 6);">
        <div class="testmiddle"
            style='width:100px;height:100px;background-color:rgb(255, 10, 10);position:absolute;z-index:2;'>
            wrapper-middle
        </div>
    </div>


    <div class="wrapper-top"
        style="position:relative;z-index:0;top:-40px;width:100px;height:200px;background-color:rgb(255, 1, 153);">
        <div class="testbottom"
            style='width:50px;height:50px;background-color:rgba(10, 255, 30, 0.829);position:absolute;z-index:0;'>
            wrapper-top
        </div>
    </div>

    <div class="wrapper-over"
        style="position:relative;z-index:1;top:0px;width:100px;height:200px;background-color:rgb(1, 255, 170);">
        <div class="testbottom"
            style='width:50px;height:50px;background-color:rgba(255, 230, 10, 0.829);position:absolute;z-index:0;'>
            wrapper-over
        </div>
    </div>