终於也进入到尾声了，最後一章要介绍网格项目的分层与顺序。

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