?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
語法:
z-index: auto | <integer>
默認(rèn)值:auto
適用于:定位元素。即定義了position為非static的元素
繼承性:無
動(dòng)畫性:當(dāng)值為<integer>時(shí)
計(jì)算值:指定的值
媒體:視覺
取值:
auto:元素在當(dāng)前層疊上下文中的層疊級(jí)別是0。元素不會(huì)創(chuàng)建新的局部層疊上下文,除非它是根元素。
<integer>:用整數(shù)值來定義堆疊級(jí)別??梢詾樨?fù)值。
說明:
檢索或設(shè)置對(duì)象的層疊順序。
z-index用于確定元素在當(dāng)前層疊上下文中的層疊級(jí)別,并確定該元素是否創(chuàng)建新的局部層疊上下文。
每個(gè)元素層疊順序由所屬的層疊上下文和元素本身的層疊級(jí)別決定(每個(gè)元素僅屬于一個(gè)層疊上下文)。
同一個(gè)層疊上下文中,層疊級(jí)別大的顯示在上面,反之顯示在下面。
同一個(gè)層疊上下文中,層疊級(jí)別相同的兩個(gè)元素,依據(jù)它們?cè)贖TML文檔流中的順序,寫在后面的將會(huì)覆蓋前面的。
不同層疊上下文中,元素的顯示順序依據(jù)祖先的層疊級(jí)別來決定,與自身的層疊級(jí)別無關(guān)。
當(dāng)z-index未定義或者值為auto時(shí),在IE6,7下會(huì)創(chuàng)建新的局部層疊上下文,而在高級(jí)瀏覽器中,按照規(guī)范不產(chǎn)生新的局部層疊上下文,如下例:
demo:
div { position: relative; } p { position: absolute; } .a { background: #f00; z-index: 10; } .b { background: #0ff; z-index: 3; } <div class="test"> <p class="a">asdas</p> </div> <div class="test2"> <p class="b">asdas</p> </div>
細(xì)心的你會(huì)發(fā)現(xiàn)上述代碼在IE6,7下的呈現(xiàn)與高級(jí)瀏覽器下不同。.test1和.test2未設(shè)置z-index,在高級(jí)瀏覽器下不會(huì)產(chǎn)生新的局部層疊上下文,也就是說它們的子元素沒有被新的局部層疊上下文包裹,那么它們的子元素就處在同一個(gè)層疊上下文中,可以直接通過自身的層疊級(jí)別來決定顯示順序,所以結(jié)果是.a 覆蓋了.b,因?yàn)?a的層疊級(jí)別比.b高;而在IE6,7下,.test1和.test2會(huì)產(chǎn)生新的局部層疊上下文,即它們的子元素被新的局部層疊上下文包裹,于是子元素顯示順序只能依賴.test1和.test2層疊級(jí)別來確定。所以結(jié)果是.b 覆蓋了.a,因?yàn)?b的父元素.test2在HTML文檔流中排在.test1之后,后來者居上覆蓋前者。參見demo: z-index創(chuàng)建局部層疊上下文在IE6,7下與高級(jí)瀏覽器下的區(qū)別
對(duì)應(yīng)的腳本特性為zIndex。
兼容性:
示例:
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>z-index_CSS參考手冊(cè)_web前端開發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .z1, .z2, .z3 { position: absolute; width: 200px; height: 100px; padding: 5px 10px; color: #fff; text-align: right; } .z1 { z-index: 1; background: #000; } .z2 { z-index: 2; top: 30px; left: 30px; background: #C00; } .z3 { z-index: 3; top: 60px; left: 60px; background: #999; } </style> </head> <body> <div class="z1">z-index:1</div> <div class="z2">z-index:2</div> <div class="z3">z-index:3</div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例