CSS 圖層疊放順序的方法詳解

一、基礎概念

CSS圖層疊放順序是指多個元素在同一位置時的層疊次序，也是CSS中一項很重要的知識點。當多個元素髮生重疊時，哪個元素會顯示在上面取決於元素的層級關係和設置的層級。

二、Z-index——掌握層疊方式

CSS中的Z-index屬性用於設置層疊元素的層級順序，其值越大，層級越高，也就越靠近畫布的頂部。

/*設置一個z-index為1的層疊元素*/
.stacked-element {
    position: absolute;
    z-index: 1;
}

需要注意的是，z-index只對定位元素有效。如果元素沒有應用定位屬性，如position:relative或position:absolute，z-index設置將不起任何作用。

三、在父級容器中控制子級元素

有時我們需要設置子元素在父級容器中的層級順序，除了對子元素應用position屬性的方式設置z-index外，我們也可以直接在父級容器中設置元素層級。

/*設置子元素的z-index為1*/
.parent {
    position: relative;
}
.child {
    position: absolute;
    z-index: 1;
}

在上述代碼中，我們把子元素的z-index設置為1，而父級容器中未設置z-index屬性值，這樣子元素可以優先於其他元素顯示出來。

四、使用透明度來控制層疊顯示

透明度也可以用來控制層疊顯示，元素的透明度越高，越能透過它下面的其他元素。

/*設置一個透明度為50%的層疊元素*/
.stacked-element {
    opacity: 0.5;
}

需要注意的是，透明度不會改變元素自身的層疊級別，即使一個完全透明的元素也仍然會在更高的層次上呈現自己而不受其他元素的壓制。

五、使用z-index和負值元素進行控制

我們可以使用z-index結合負值元素，控制層疊元素的顯示順序，儘管這種方式不太容易理解，但在特定的情況下，最有效。

/*通過z-index結合負值元素設置層級*/
.higher-element {
    position: relative;
    z-index: 2; 
}
.lower-element {
    position: relative;
    z-index: 1; 
}
.negative-element {
    position: absolute;
    z-index: -1;
}

在上述代碼中，.higher-element和.lower-element都是定位元素，當它們疊在一起時，會影響層級。我們創建了一個透明的.negtive-element，並將其嵌套在.higher-element和.lower-element元素里，設置z-index為-1，這樣無論是.higher-element還是.lower-element都被.negtive-element所壓制，因為它們擁有更高的層級。

六、使用!important規則強制指定

有時候，我們可以使用!important規則去強制指定CSS屬性的值，雖然不太優美，但是在某些情況下可以達到效果。

/*使用!important規則強制指定z-index的值*/
.stacked-element {
    position: absolute;
    z-index: 3!important;
}

需要注意的是，!important不必然總是正確，只有在最後的手段中使用，當其他方法都失敗時，才應該考慮使用他。

七、總結

以上是掌握CSS 圖層疊放順序的方法，我們可以基於應用場景選擇合適的方法，從而達到最佳的層疊效果。