title: z-index
date: 2017-05-16
- z-index
z-index
z-index
概念
z-index
可選值：
- relative(相對(duì)定位).
- absolute(絕對(duì)定.位).
- fixed(固定定位).
- static(靜態(tài)).
- inherit(繼承).
- initial(初始).
官方文檔(從英文翻譯來(lái))：
- 具有負(fù)值的stacking contexts元素坡贺，按照出現(xiàn)的先后順序排列（越靠后層級(jí)越靠上） .
- 沒(méi)有被定位馍忽，沒(méi)有浮動(dòng)的塊級(jí)元素涧偷，按照出現(xiàn)的先后順序排列 .
- 沒(méi)有被定位，浮動(dòng)的元素，按照出現(xiàn)的先后順序排列 .
- 內(nèi)聯(lián)元素鳞贷，按照出現(xiàn)的先后順序排列排列 .
- 被定位的元素，按照出現(xiàn)的先后順序排列.
層級(jí)關(guān)系的比較
- 對(duì)于同級(jí)元素，默認(rèn)(或position:static)情況下文檔流后面的元素會(huì)覆蓋前面的.
- 對(duì)于同級(jí)元素凤跑，position不為static且z-index存在的情況下z-index大的元素會(huì)覆蓋z-index小的元素，即z-index越大優(yōu)先級(jí)越高.
- IE6/7下position不為static叛复，且z-index不存在時(shí)z-index為0仔引，除此之外的瀏覽器z-index為auto.
- <font style="color:red">z-index為auto的元素不參與層級(jí)關(guān)系的比較</font>(對(duì)比從父規(guī)則理解)，由向上遍歷至此且z-index不為auto的元素來(lái)參與比較.
默認(rèn)值規(guī)則
- Z-index只能工作在被明確定義了absolute褐奥，fixed或relative 這三個(gè)定位屬性的元素中(除了static).
- Z-index 屬性咖耘，當(dāng)被正確使用的時(shí)候，會(huì)改變自然的層疊順序撬码。.
- Z-index 為 0 的節(jié)點(diǎn)與沒(méi)有定義 Z-index 在同一層級(jí)內(nèi)沒(méi)有高低之分.
順序規(guī)則
- 如果不對(duì)節(jié)點(diǎn)設(shè)定 position 屬性儿倒，位于文檔流后面的節(jié)點(diǎn)會(huì)遮蓋前面的節(jié)點(diǎn).
定位規(guī)則
- relative，absolute或者fixed呜笑，這樣的節(jié)點(diǎn)會(huì)覆蓋沒(méi)有設(shè)置 position 屬性或者屬性值為static的節(jié)點(diǎn)
- A 和 B 都不設(shè)定 position, 但對(duì) A 的子節(jié)點(diǎn) A-1 設(shè)定 position:relative.B 會(huì)覆蓋 A, 又根據(jù)定位規(guī)則 A' 會(huì)覆蓋 B;用例(可能不太貼切,但很常見(jiàn)&實(shí)用):
stackDemo-mainMenu.png
從父規(guī)則
- 如果 A, B 節(jié)點(diǎn)都定義了 position:relative, A 節(jié)點(diǎn)的 z-index 比 B 節(jié)點(diǎn)大, 那么 A 的子節(jié)點(diǎn)必定覆蓋在 B 的子節(jié)點(diǎn)前面.
補(bǔ)充：
- 不考慮父節(jié)點(diǎn)的影響, 設(shè)得再大也沒(méi)用, 那是無(wú)法逾越的層級(jí)
- opacity 會(huì)影響層疊順序(如下圖)
z-inde_float_opacity
z-inde_float_opacity
z-inde_float_opacity
7層規(guī)則,速成z-index
- 形成層疊上下文環(huán)境元素的背景與邊框
- 擁有負(fù) z-index 的子堆疊上下文元素 （負(fù)的越高越堆疊層級(jí)越低）
- 正常流式布局夫否，非 inline-block彻犁，無(wú) position 定位（static除外）的子元素
- 無(wú) position 定位（static除外）的 float 浮動(dòng)元素
- 正常流式布局， inline-block元素凰慈，無(wú) position 定位（static除外）的子元素（包括 displaytable 和 displayinline ）
- 擁有 z-index : 0 的子堆疊上下文元素
- 擁有正 z-index 的子堆疊上下文元素（正的越低越堆疊層級(jí)越低）
z-index_7.png
