用Z-index來改變堆疊順序
一 z-index 在什么情況下才生效立膛？
Z-index的運用是需要條件的,與其相關(guān)的屬性就是position屬性变骡。我們以三個div來舉例子。
-
position: static;
當(dāng)三個div的position都為static時,我們把div(A)的Z-index設(shè)置為15, 把div(B)的Z-index設(shè)置為10,把div(C)的Z-index設(shè)置為5。
發(fā)現(xiàn)div(B)依然把div(A)的一部分擋住了,所以當(dāng)position為static時,Z-index起不到任何改變堆疊的作用两疚。
-
position: relative/absolute/fixed;
當(dāng)三個div的position都為relative/absolute/fixed時,發(fā)現(xiàn)Z-index生效派歌。
總結(jié): 只有position的值為relative/absolute/fixed中的一個,Z-index才會生效弯囊。
二 z-index值越大元素越靠前，對嗎胶果？
我們現(xiàn)在div(A)和div(B)中再分別創(chuàng)建一個小的div(c)和div(d),
這一張圖就是一個特例
我們觀察到,div(a)的Z-index為20 可是為什么還會被Z-index僅僅為10的div(B)遮擋住呢?
難道是因為Z-index繼承給他的子元素了嗎?不Z-index可是不繼承給它的子元素的匾嘱。
我們試試把biv(A)的Z-index設(shè)置成auto,
div(a)成功的遮擋住了Z-index比他小的元素。
再試試只把div(a)設(shè)置為auto
Paste_Image.png
總結(jié):
1. 當(dāng)Z-index的值設(shè)置為auto時,不建立新的堆疊上下文,當(dāng)前堆疊上下文中生成的div的堆疊級別與其父項的框相同早抠。
2. 當(dāng)Z-index的值設(shè)置為一個整數(shù)時,該整數(shù)是當(dāng)前堆疊上下文中生成的div的堆棧級別霎烙。該框還建立了其堆棧級別的本地堆疊上下文。這意味著后代的z-index不與此元素之外的元素的z-index進行比較蕊连。
ps: 通俗講就是,當(dāng)一個div的Z-index為整數(shù)時,它的子元素和外界元素進行比較時,采用父元素的Z-index進行比較, 和兄弟元素比較采用自身的Z-index悬垃。當(dāng)一個div的Z-index為auto時,如果它和它的兄弟進行比較,采用它父元素的Z-index。
三 z-index 不設(shè)置和設(shè)置為0有什么區(qū)別?
如果不設(shè)置Z-index那么默認(rèn)值為auto,則不建立層疊上下文甘苍。設(shè)置為0則會脫離文檔流,建立層疊上下文尝蠕。
文檔流Z軸
