.jpg)
z-index不起作用的常見原因及解決方法：1. 元素未設(shè)置position屬性，需確保目標(biāo)元素及父元素設(shè)置為relative、absolute、fixed或sticky；2. 父元素創(chuàng)建了新的層疊上下文，需檢查并調(diào)整父元素的z-index值；3. z-index值未正確比較，需確保目標(biāo)元素的z-index大于需覆蓋元素；4. html結(jié)構(gòu)影響，后出現(xiàn)的元素會覆蓋前者；5. opacity小于1也會創(chuàng)建層疊上下文，需注意其對層疊順序的影響。
css調(diào)整層疊順序主要依賴z-index屬性，但它并非萬能。z-index只在定位元素（position屬性值為relative、absolute、fixed或sticky）上有效。 此外，層疊上下文也會影響z-index的效果。
解決方案：
要調(diào)整元素的層疊順序，首先確保該元素是定位元素。然后，賦予它一個z-index值。z-index值越大，元素越靠近用戶。如果多個元素z-index值相同，則在HTML中后出現(xiàn)的元素會覆蓋先出現(xiàn)的元素。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
為什么我的z-index不起作用？如何排查？
z-index不起作用通常有幾個原因。最常見的是元素沒有設(shè)置position屬性。其次，檢查元素的父元素是否創(chuàng)建了新的層疊上下文。如果父元素設(shè)置了position: relative且z-index不為auto，那么該父元素就創(chuàng)建了一個新的層疊上下文。這意味著子元素的z-index值只在其父元素內(nèi)部有效，無法與父元素外部的元素進(jìn)行比較。
排查步驟：
- 檢查position屬性： 確保目標(biāo)元素及其父元素都設(shè)置了position屬性（relative、absolute、fixed或sticky）。
- 檢查層疊上下文： 檢查目標(biāo)元素的父元素是否創(chuàng)建了新的層疊上下文。可以使用瀏覽器的開發(fā)者工具查看元素的Computed樣式，查找z-index屬性。如果父元素創(chuàng)建了層疊上下文，則需要調(diào)整父元素的z-index值。
- 檢查z-index值： 確保目標(biāo)元素的z-index值大于需要覆蓋的元素的z-index值。注意，z-index可以是負(fù)數(shù)。
- HTML結(jié)構(gòu)： 如果z-index值相同，檢查HTML結(jié)構(gòu)。后出現(xiàn)的元素會覆蓋先出現(xiàn)的元素。
- opacity屬性： opacity小于1的元素也會創(chuàng)建層疊上下文。
舉個例子，假設(shè)有以下HTML結(jié)構(gòu)：
<div class="parent"> <div class="child1">Child 1</div> <div class="child2">Child 2</div> </div> <div class="sibling">Sibling</div>
CSS：
.parent { position: relative; z-index: 1; /* 創(chuàng)建層疊上下文 */ } .child1 { position: relative; z-index: 2; } .child2 { position: relative; z-index: 1; } .sibling { position: relative; z-index: 0; }
在這個例子中，.child1的z-index為2，.child2的z-index為1，但它們都位于.parent這個層疊上下文中。.sibling的z-index為0，雖然小于.child1的z-index，但由于.parent創(chuàng)建了層疊上下文，.sibling會位于.parent之下。
如何利用層疊上下文解決復(fù)雜的層疊問題？
理解層疊上下文是解決復(fù)雜層疊問題的關(guān)鍵。可以利用層疊上下文將元素分組，并控制整個組的層疊順序。
例如，假設(shè)需要創(chuàng)建一個模態(tài)框，并確保它始終位于頁面最頂層。可以為模態(tài)框的父元素創(chuàng)建一個新的層疊上下文，并賦予一個較高的z-index值。這樣，模態(tài)框內(nèi)的所有元素都會位于該層疊上下文之上，而不會受到頁面其他元素的層疊順序影響。
<div class="modal-container"> <div class="modal"> Modal Content </div> </div>
.modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; /* 創(chuàng)建層疊上下文，并賦予最高層疊順序 */ } .modal { position: relative; background-color: white; padding: 20px; z-index: 1; /* 位于modal-container的層疊上下文之上 */ }
在這個例子中，.modal-container創(chuàng)建了一個新的層疊上下文，并賦予了最高的z-index值。.modal位于.modal-container的層疊上下文之上，因此始終位于頁面最頂層。即使頁面上有其他元素的z-index值大于.modal的z-index，.modal仍然會顯示在最前面。
除了z-index，還有哪些因素會影響層疊順序？
除了z-index和層疊上下文，還有一些其他因素會影響層疊順序：
- HTML結(jié)構(gòu)： 在HTML中后出現(xiàn)的元素會覆蓋先出現(xiàn)的元素（在z-index值相同的情況下）。
- position屬性： 定位元素（position屬性值為relative、absolute、fixed或sticky）會覆蓋靜態(tài)元素（position屬性值為Static）。
- opacity屬性： opacity小于1的元素會創(chuàng)建層疊上下文。
- transform屬性： 某些transform屬性（例如transform: translateZ(0)）也會創(chuàng)建層疊上下文。
- Filter屬性： 某些filter屬性（例如filter: blur(1px)）也會創(chuàng)建層疊上下文。
- isolation屬性： isolation: isolate會創(chuàng)建一個新的層疊上下文。
理解這些因素有助于更精確地控制元素的層疊順序。 調(diào)試時，可以使用瀏覽器的開發(fā)者工具檢查元素的Computed樣式，查看影響層疊順序的屬性。 記住，層疊順序是一個復(fù)雜的問題，需要仔細(xì)分析和調(diào)試才能找到最佳解決方案。
.png)
