給元素設定position為absolute或者z-index不為auto，或者opacity小於1，會建立一個堆疊上下文，它的後代元素，都會根據它父堆疊上下文，進行排序，不會針對其他的堆疊上下文排序。

頁面結構

         <div class="a"></div>
        <div class="b">
            <div class="c"></div>
        </div>
        <div class="d"></div>        

沒有設定堆疊上下文前：

            div{
                width: 50px;
                height: 50px;
                position: absolute;
            }
            .a{
                background-color: red;
            }
            .b{
                background-color: #008000;
                left: 20px;
                top: 20px;
            }
            .c{
                background-color: black;
                left: 10px;
                top: 10px;
                z-index: 2;
            }
            .d{
                background-color: blue;
                left: 60px;
                top: 60px;
                z-index: 1;
            }
 

b元素建立了堆疊上下文後：

　　　　　　　div{
                width: 50px;
                height: 50px;
                position: absolute;
            }
            .a{
                background-color: red;
            }
            .b{
                background-color: #008000;
                left: 20px;
                top: 20px;
                z-index: 1;
                /*opacity: 0.99; z-index和opacity有一個就可以滿足*/
            }
            .c{
                background-color: black;
                left: 10px;
                top: 10px;
                z-index: 2;
            }
            .d{
                background-color: blue;
                left: 60px;
                top: 60px;
                z-index: 1;
            }