堆疊（棧）上下文 （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>