CSS應用實例(3)-改變圖層順序

在「版面配置」一文中有提到,瀏覽器預設的圖層順序是按照我們安排HTML標籤順序來決定,所以越下面出現的標籤物件會覆蓋掉上面的物件。另外,position:absolute、relative或fixed的物件會覆蓋掉static的物件。

下面用一個簡單的範例來做說明:




當我們把上面的範例內容貼到HTML檔案時,會先按照瀏覽器預設的圖層順序排列:紅色的box3因為沒有設定position,所以position的值是static,會被有設定其它position的box1和box2壓在最下面;box1和box2都是absolute,所以DIV標籤比較下面的黃色box2會壓在box1上面;由於藍色的box1_in在綠色的box1_out標籤裡面,所以預設會包在裡頭。顯示結果如下:

這個時候,如果我們把黃色box2的z-index改成「-1」(往下移一層),那麼因為box1和box3的z-index都是「0」,所以box2會被移到圖層最下面,完全看不見了,變成下面的圖案:

這個時候,如果要調整box3的z-index也是不行的,因為z-index無法在static下作用。所以如果我們要把黃色box2移到box1和box3之間,最好的辦法是修改綠色box1的z-index為「1」(往上移一層)。修改box1_out的位置,裡面的box1_in也會一起作用,變成下面的樣子: