要調整css層級順序，關鍵在于正確使用z-index屬性。首先，z-index僅對設置了position為relative、absolute、fixed或sticky的元素有效；其次，z-index值可為正數、負數或auto，數值越大層級越高；最后，未設置z-index時，元素按html出現順序堆疊，后出現的覆蓋前面的。若z-index無效，可能因未設置position屬性或陷入層疊上下文限制，此時需調整父級z-index或移出該上下文。調試復雜層級關系時，可用開發者工具查看元素樣式，并通過簡化問題、添加outline或使用console.log輔助排查。z-index: auto表示不創建新層疊上下文，層疊順序與父元素一致。負z-index可將元素置于當前上下文背景之后，但無法低于根元素背景。
css調整層級順序，簡單來說，就是通過z-index屬性來控制元素在垂直于屏幕方向上的堆疊順序。數值越大，層級越高，越靠近用戶。但事情往往沒那么簡單，還有很多因素會影響最終的顯示效果。
解決方案
要理解CSS的層級，需要把握幾個關鍵點。首先，z-index只對定位元素（position: relative, position: absolute, position: fixed, 或 position: sticky）有效。其次，z-index的值可以是正數、負數或零。最后，如果沒有設置z-index，元素會按照它們在HTML中的出現順序堆疊，后面的元素會覆蓋前面的元素。
舉個例子，假設你有兩個div，一個紅色，一個藍色。
立即學習“前端免費學習筆記（深入）”；
<div class="red">Red</div> <div class="blue">Blue</div>
.red { position: relative; width: 100px; height: 100px; background-color: red; z-index: 1; } .blue { position: relative; width: 100px; height: 100px; background-color: blue; margin-top: -50px; /* 覆蓋紅色div */ z-index: 2; }
在這個例子中，藍色div的z-index大于紅色div，所以它會覆蓋在紅色div上面。如果移除z-index，藍色div仍然會覆蓋紅色div，因為它在HTML中出現得更晚。
為什么我的z-index不起作用？
這是個常見問題。最大的可能性就是元素沒有設置position屬性。z-index只有在position屬性值為relative, absolute, fixed, 或 sticky時才生效。
另外一個原因是，你可能陷入了層疊上下文（stacking context）的陷阱。層疊上下文可以理解為一個獨立的層疊空間，在這個空間內，元素的z-index值只影響該空間內的層疊順序。
比如，如果一個父元素設置了position: relative和z-index: 1，那么它的所有子元素都會在這個層疊上下文中。即使子元素的z-index設置得很高，它也無法超越父元素的層疊上下文。要解決這個問題，要么調整父元素的z-index，要么將子元素移出父元素的層疊上下文。
如何調試復雜的層級關系？
當層級關系變得復雜時，調試可能會變得困難。瀏覽器的開發者工具是一個強大的幫手。你可以使用開發者工具來檢查元素的z-index值，以及它是否創建了一個新的層疊上下文。
此外，還可以嘗試以下方法：
- 簡化問題：逐步移除樣式，直到問題消失，從而找到導致層級問題的根源。
- 使用outline或border：給元素添加outline或border，可以更清晰地看到元素的邊界和層疊關系。
- 控制臺輸出：使用console.log輸出元素的z-index值，以便更好地理解層疊關系。
z-index: auto是什么意思？
當z-index設置為auto時，元素不會創建一個新的層疊上下文，并且它的層疊順序與父元素相同。簡單來說，它會按照HTML中的出現順序堆疊。如果父元素創建了一個新的層疊上下文，那么z-index: auto的元素也會在這個層疊上下文中，但它的層疊順序由它在父元素中的位置決定。
如何使用負的z-index？
負的z-index可以用來將元素放置在背景之后。比如，你可以將一個元素放置在其他元素的下方，創建一個背景效果。但需要注意的是，負的z-index只能將元素放置在當前層疊上下文的背景之后，無法超越根元素的背景。
