堆疊（堆疊）背景關系 （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  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  style="float:left;width:800px;background-color:rgb(43, 255, 0);margin-top:-40px;">
        float
    </div>

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


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


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

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

標籤：Html/Css

上一篇：CSS如何設定串列樣式屬性，看這篇文章就夠用了

下一篇：移動端流式布局