CSS Z-Index詳解

一、Z-Index是什麼?

Z-Index是CSS中的一個屬性,它控制HTML中的元素在z軸方向上的顯示順序。根據Z-Index的指定，我們可以輕鬆地控制元素在不同層級里的顯示順序。

Z-Index是一個數字，其取值範圍為整數、負數和0，數值越大，就越在上層，反之則越在下層，當數值相等時，則按照HTML的書寫順序來決定誰在上層。

二、怎樣設置Z-Index值？

Z-Index的設置有以下幾種方式：

1、全局默認值

默認情況下，所有元素的Z-Index屬性都相同，可設置global屬性，全局設定所有元素的Z-Index值：

    
    *{
     z-index:1;
    }
    

2、單個元素設置Z-Index

可針對單個元素設定自己的Z-Index值：

    
    .element {
      z-index: 99; 
    }
    

3、父元素控制多個子元素的層級順序

父元素的Z-Index屬性優先於它內部的子元素：

    
    .parent{
     z-index:2;
    }
    .child{
     z-index:1;
    }
    

三、如何理解z軸方向

平時我們都將頁面元素分為x、y軸方向來考慮，那麼z軸方向在頁面中存在嗎？

答案是存在的。在HTML文檔中，元素根據其位置來確定它的大小和形狀，並放置在頁面的特定位置上。HTML中的每個元素都是三維對象，擁有高度、寬度和深度。深度掌管着元素究竟位於哪個元素之前或之後。

四、比較典型的使用場景

1、彈出層

彈出層一般需要置於最上層。可以使用如下代碼實現:

    
    .mask-1 {
      z-index: 99; 
    }
    .popup-1 {
      z-index: 100; 
    }
    

2、導航欄下拉菜單

導航欄下拉菜單一般需要置於內容下面，在其它組件上面。可以使用如下代碼實現：

    
    .header {
      position: relative; 
      z-index: 100; 
    }
    .dropdown-menu {
      position: absolute;
      top: 100%;
      z-index: 99;
    }
    

3、輪播圖

輪播圖可能會與其他元素重疊，一般需要設置較高的Z-Index值。

    
    .carousel {
      z-index: 1; 
    }
    .layer {
      z-index: 2; 
    }
    

五、常見問題及解決方案

1、設置Z-Index後元素仍然無法前置？

答案是，有可能該元素的布局上下文出現問題。此時可能需要修改該元素的定位方式或者修改其父元素的屬性。

2、Z-Index是否受position屬性限制？

是的，只有定位元素（position的值不為static）才能獲得z-index值。

小結

Z-Index是一種控制頁面元素顯示層級的CSS屬性，常用於解決頁面布局上的重疊問題。通過設置元素的Z-Index值，可以改變元素在z軸方向上的顯示順序。避免出現問題的方法則是找到問題所在，改正問題可能出現的原因。