z-index:auto;
z-index:;
z-index:inherit;繼承
1.支援負值
2.支援css3 animation動畫;
3.在css2.1時代，需要和定位元素(position:relative/absolute/fixed/sticky)配合使用；
@keyframes zindex
100%
}1.後來居上的準則；
2.那個大，那個上；
後者覆蓋前者：（後來居上的準則）
前者覆蓋後者：（z-index:那個大，那個上）
1.祖先優先原則；(前提：z-index值是數值，非auto)
後者覆蓋前者
前者覆蓋後者
css2.1:(z-index:auto)當前層疊上下文的生成盒子層疊水平是0，盒子（除非是根元素）不會建立乙個新的層疊上下文。
1.定位元素預設z-index:auto可以看成是z-index:0;
2.z-index不為auto的定位元素會建立層疊上下文；
3.z-index層疊順序的比較止步於父級層疊上下文；
1.定位元素會覆蓋普通元素
後者覆蓋前者 （後來居上原則）
.a{}
.b前者覆蓋後者
.a.b
原因：前者的 定位元素的 z-index:0 z-index:auto或者z-index:0 高於 inline/inline-block水平盒子
2.z-index不為auto，與建立層疊上下文
img覆蓋box，（box和img都沒有z-index,都沒有建立層疊上下文，都是普通元素）
.boxbox覆蓋img（box的z-index是auto，沒有建立層疊上下文，img會一直往上找，只到找到層疊上下文容器）.box img
.boximg覆蓋box （box的z-index是0，建立層疊上下文，img會找到層疊上下文容器box，並在其上顯示）.box img
.boxbox2覆蓋img（div是普通元素所以它的z-index:1,沒有任何作用）.box img
.box2img覆蓋box2（）.box2>div
.box2>div img
.box2z-index:auto 和z-index:0,前者不建立層疊上下文，後者建立層疊上下文，.box2>div
.box2>div img
但不包括ie7,ie7的z-index:auto,建立層疊上下文
從層疊順序上講，z-index:auto可以看成z-index:0,
但從層疊上下文來講，兩者卻有著本質差異。
3.z-index受限於層疊上下文
後者覆蓋前者
.box1
.box1 img
.box2
.box2 img
原因：box2的z-index大於box1的z-index
頁面根元素天生具有層疊上下文，稱之為『根層疊上下文』。
z-index值為數值的定位元素(相對或絕對)也具有層疊上下文。
其他參與層疊上下文的屬性們：
1.z-index值不為auto的flex項（父元素display:flex|inline-flex）
2.元素的opacity值不是1
3.元素的transform值不是none
4.元素mix-blend-mode值不是normal
5.元素的filter值不是none
6.元素的isolation值是isolate
7.position:fixed宣告
8.will-change指定的屬性值為上面任意乙個
9.元素的-webkit-overflow-scrolling設為touch
img覆蓋box3（box3建立了層疊上下文容易，，img會找到層疊上下文容器box3，並在其上顯示）
.box3z-index與其他css屬性層疊上下文：.box3 img
--非定位元素層疊上下文和z-index關係大揭秘
1.不支援z-index的層疊上下文元素的層疊順序均是z-index:auto級別
2.依賴z-index的層疊上下文元素的層疊順序取決於z-index值
依賴z-index值建立層疊上下文的情況：
1.position值為relative/absolute或者fixed(部分瀏覽器)
2.display:flex|inline-flex容器的子flex項
深入理解z index
要解決的問題 在頁面編寫的過程中，經常需要處理元素的重疊。重疊的順序不當則容易造成元素被錯誤地遮蓋等現象。一般地，有很多人認為只需要指定元素的z index即可調整重疊的順序，但是實際上並不是這樣的。重新理解頁面維度 當我們開啟乙個網頁，我們會看到乙個二維的世界。在這個二維的世界裡，頁面裡的box ...
深入理解CSS背景
背景色background接受所有合法的顏色，還可以接受乙個使背景透明的關鍵字。關於顏色的設定請移步至此。背景顏色不能繼承。其預設值是transparent，如果乙個元素沒有指定的顏色，那麼背景就應當是透明的，這樣其祖先元素的背景才能可見。值 transparent inherit 初始值 tran...
深入理解CSS浮動
float 浮動 浮動元素脫離普通流，然後按照指定方向，向左或者向右移動，碰到父級邊界或者另外乙個浮動元素停止 值 left right none inherit 初始值 none 應用於 所有元素 繼承性 無 浮動流正常流中元素乙個接乙個排列 浮動元素也構成浮動流 塊級框浮動元素自身會生成乙個塊級...