z-index 層疊上下文的關係
阿新 • • 發佈：2019-01-26
2.背景介紹
z-index是什麼？w3school給出的定義是：z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。該屬性設定一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離使用者更近，為負數則表示離使用者更遠。2.知識剖析
看上面這段文字我相信一定會被繞暈，現在把這段話的幾個重要點跳出來一個個講，- 通常x軸和y軸是用來表示二維空間的水平位置和垂直位置；就好像是一張紙，只能在紙上移動！關鍵字，平面， demo（ps畫圖）
- 然而Z軸呢，就是三維的一個概念，現在我們把網頁看成電腦螢幕，但是不要把電腦螢幕看成單一的一塊玻璃，筒子們，發揮你的想象，這個螢幕是由一張張的玻璃堆疊起來的；z軸的作用就是讓內容在這一堆玻璃（網頁）上的哪一塊玻璃上顯示，內容越放在玻璃的下面，是不是離看起來離我們越遠呢？反之，當我們把內容放在第一塊玻璃上，是不是看起來離我們越近呢？那麼在網頁中怎麼讓內容放在我們想要的玻璃上呢，z-index就可以幫我們實現這個想法！現在站在上帝視角看來這一堆玻璃就是一個二維平面，假設現在有兩個元素佔了這個二維平面的一塊共同的區域，z-index大的元素會掩蓋z-index較小的元素（僅僅是相同的部分）demo1
- z-index有三種值，分別是auto自動，整數（正整數、0、負整數），inherit（繼承）；
- z-index只能在定位元素上有效（如position:relative）；
z-index是怎麼工作的- 層疊次序 demo（stacking-order）
- 層疊上下文和層疊層
如果沒有那幾種方式創建出層疊上下文，那麼大家都是老老實實的依照層疊次序的順序來進行排列的，然而，總是有那麼幾個搞事的，z-index就是其中之一；被z-index創建出來的層疊上下文有什麼作用呢？它有著獨立於頁面上其他層疊上下文和層疊層的層疊層！這個需要結合那個七個方塊的demo，最下面的background是建立在層疊上下文的基礎上，也就是在層疊上下文中，所有的父元素會渲染在這個元素層疊上下文背景和邊框上面；在block、float盒子等不存在層疊上下文的元素中，子元素設定z-index為負值的時候，那麼子元素會被父元素遮擋 假設我們現在要設定子元素的z-index=-1，但是又想讓子元素在保持z-index值不變得情況下在父級的上方浮現，這時候應該怎麼辦呢？是的，為div1建立一個層疊上下文就行了，現在div2可以說事div1中所屬的一個層疊層了，再次結合7階圖，不管這時候div2的z-index是負值還是正整數，它永遠都會在div1的上方！定位元素還會產生新的層疊上下文，而這整一個層疊層會顯示在另一個層疊上下文中的所有層疊層的上面或者下面。- 在開發中儘量避免層疊上下文的多層巢狀，因為層疊上下文巢狀過多的話容易產生混亂，如果對層疊上下文理解不夠的話是不好把控的。
- 非浮層元素（對話方塊等）儘量不要用z-index（通過層疊順序或者dom順序或者通過層疊上下文進行處理）
- z-index設定數值時儘量用個位數
- 讓absolute元素覆蓋正常文件流內元素（不用設z-index，自然覆蓋）
- 讓後一個absolute元素覆蓋前一個absolute元素（不用設z-index，只要在HTML端正確設定元素順序即可）
- 當absolute元素覆蓋另一個absolute元素，且HTML端不方便調整DOM的先後順序時，需要設定z-index: 1。非常少見的情況下多個absolute交錯覆蓋，或者需要顯示最高層次的模態對話方塊時，可以設定z-index > 1。