z-index,這個css屬性我感覺是很多人容易忽略的乙個點。而且理解的不夠好（當然也包括我自己啦），但是不理解一些其他影響元素層疊秩序的因素——層疊上下文，定位，透明度。
1.z-index究竟是什麼？
=>盒子在堆疊上下文中的堆疊級別
=>盒子是否建立了乙個堆疊上下文
什麼是堆疊上下文，那就是我們看到的網頁實際上是三維的，和裝置螢幕垂直的就是元素所在的渲染層，元素就是在這個層上進行堆疊。
2.預設堆疊次序（沒有z-index的元素）*
=>根節點的背景和邊框
=>文件流中的後代元素，按照在html中出現的順序
=>脫離文件流的定位元素，按照html中出現的順序
3.重寫預設堆疊次序，也就是賦值z-index
當z-index大於0，那麼意味著這個元素「離」裝置螢幕距離更近。z-index最高的那乙個才是離裝置螢幕最近的那個一，但是生效的前提是，元素處於同乙個堆疊上下文當中
4.堆疊上下建立的條件
a.首先頁面的根元素< html >建立的預設堆疊上下文
b.對於其他元素建立堆疊上下文的條件是：成為定位元素，並且具有非auto的z-index屬性值，或者元素具有小於1的opacity屬性
5.管理z-index
在簡單的網頁應用當中，堆疊上下文貌似不是乙個什麼重要的事情，但是當介面越來越複雜，並出現各種豐富的ui控制項，頁面就出現了多個堆疊上下文。當頁面出現多個頁面上下文時，管理z-index就會越來越複雜，同時也會變得越來越重要。
因此程式設計式的管理z-index就是一種非常可靠的方案。
/**
*管理z-index堆疊上下文
**/let
isposzindex
=(el)
=>
letdoesstylezindex
=(el)
=>
if(styles.transform!==
'none')if
(styles.transformstyle ===
'preserve-3d')if
(styles.perspective !==
'none')if
(styles.flowfrom!==
'none'
&&styles.content!==
'normal')if
(styles.position ===
'fixed'
)return
false
}let
zindexadmin
=(global)
=>
,getstackctx
(el)
return parentnode
},bringtofront
(el,createstackingctx,root)
,sendtoback
(el,createstackingctx,root)}}
/***修改元素的z-index
**/let
modifyzindex
=(el,increment)
=>
if(increment)
else}}
if(!siblingmaxminzindex&&
!increment)
siblings[i]
.style.zindex ==
++siblingzindex;}}
} el.style.zindex = increment?siblingmaxminzindex+1:
(siblingmaxminzindex?siblingmaxminzindex-1:
0)}/**
*修改元素的z-index
*設計思想：移動對應的元素，使之出現在元素所在的堆疊上下文頂部或者底部，並且在必要的時候，在父元素上建立堆疊上下文
*createstackingctx引數控制這個行為：true，設定父元素為position:relative,z-index=0,
**/let
alterzindex
=(el,createstackingctx,root,increment)
=>
else
}modifyzindex
(el,increment);if
(root&&
(root!==zindexadmin.
getstackctx
(el)
&&stackctxel.tagname !==
'html'))
}
深入理解z index
要解決的問題 在頁面編寫的過程中，經常需要處理元素的重疊。重疊的順序不當則容易造成元素被錯誤地遮蓋等現象。一般地，有很多人認為只需要指定元素的z index即可調整重疊的順序，但是實際上並不是這樣的。重新理解頁面維度 當我們開啟乙個網頁，我們會看到乙個二維的世界。在這個二維的世界裡，頁面裡的box ...
理解 CSS 的 z index 屬性
通常認為html頁面是二維的，但實際上，css還有乙個z index屬性，允許層疊元素。所有的盒模型元素都處於三維座標系中。除了我們常用的橫座標和縱座標，盒模型元素還可以沿著 z軸 層疊擺放，當他們相互覆蓋時，z軸順序就變得十分重要。假定元素沒有指定z index屬性，那麼元素按照如下順序疊放 從底...
css深入理解z index
z index auto z index z index inherit 繼承 1.支援負值 2.支援css3 animation動畫 3.在css2.1時代，需要和定位元素 position relative absolute fixed sticky 配合使用 keyframes zindex ...