iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 30
2
Modern Web

重新認識 Flex 和 Grid系列 第 30

[Day30] grid z-index 分層 / order 順序

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

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。


資料來源:


上一篇
[Day29] grid 項目對齊屬性
系列文
重新認識 Flex 和 Grid30

尚未有邦友留言

立即登入留言