Z-index屬性
2020/11/6 10:47:12 閱讀：3517
發(fā)布者：3517
Z-index屬性決定了一個(gè)HTML元素的層疊級別。元素層疊級別是相對于元素在Z軸上（與X軸Y軸相對照）的位置而言。一個(gè)更高的Z-index值意味著這個(gè)元素在疊層順序中會更靠近頂部。這個(gè)層疊順序沿著垂直的線軸被呈現(xiàn)。
自然的層疊順序
在一個(gè)HTML頁面中，自然的層疊順序（也就是元素在Z軸上的順序）是由很多因素決定的。下面的是一個(gè)列表，它展示的列表項(xiàng)是處于一個(gè)層疊環(huán)境（stacking context，暫時(shí)未找到合適的漢語翻譯，應(yīng)該是指層疊的元素所處的那個(gè)層疊的環(huán)境）中，這些項(xiàng)是處于這個(gè)層疊環(huán)境的底部的。這個(gè)列表中的項(xiàng)都沒有被賦予Z-index屬性。
元素的背景和邊框會創(chuàng)建一個(gè)stacking context
引用:
-
具有負(fù)值的stacking contexts元素，按照出現(xiàn)的先后順序排列（越靠后層級越靠上）
-
沒有被定位，沒有浮動的塊級元素，按照出現(xiàn)的先后順序排列
-
沒有被定位，浮動的元素，按照出現(xiàn)的先后順序排列
-
內(nèi)聯(lián)元素，按照出現(xiàn)的先后順序排列排列
-
被定位的元素，按照出現(xiàn)的先后順序排列
Z-index 屬性，當(dāng)被正確使用的時(shí)候，會改變自然的層疊順序。
當(dāng)然，除非元素已經(jīng)被定位按照互相交疊的形式展現(xiàn)，否則元素的層疊順序并不會特別的明顯。下面的，負(fù)邊距的BOX被拿來展示，用以說明自然的層疊順序。
使Z-index并不是一個(gè)難以理解的屬性，但它卻會因錯(cuò)誤的假設(shè)而使很多初級的開發(fā)人員陷入混亂。混亂發(fā)生的原因是因?yàn)閆-index只能工作在被明確定義了absolute，fixed或relative 這三個(gè)定位屬性的元素中。
