終於也進入到尾聲了，最後一章要介紹網格項目的分層與順序。

z-index 分層

.item {
    z-index: auto | <interger>
}
預設:auto

網格項目會重疊的情形有很多種：
1.利用負值的邊界（如:margin）將網格項目推出網格區域
2.兩個網格項目的網格區域有重疊

預設情況下網格項目重疊時，會以文件原始檔中的順序來決定誰可以覆蓋在前面，較晚出現在原始檔的網格項目在重疊時會較前面。

如果想要改變重疊的順序，可以使用 z-index 來決定誰要疊在前面，而數字越大時，就越被優先放到前面。另外要注意的是 z-index:0 會在預設 z-index:auto 的前面（可以想像成優先權為： z-index:-1 < 預設 z-index:auto < z-index:0）

order 順序

基本上 order 已經在 flexbox 第16天 講過了，然而當重疊的網格項目遇到 order 時，在重疊的順序上也會改變。

.item {
    order: <integer>
}
預設值：0

在 grid 中，當照原始碼順序放置的網格項目排列有重疊時，使用 order 為正值時，因為 order 數字越大"越晚描繪"，使網格項目能較優先疊到前面，然而文件建議使用 order 的時機只能在視覺順序與導覽順序不同的情況下，其它應該直接改變原始碼的位置，或是使用 z-index。

資料來源：

• CSS 大全第四版

• MDN z-index