中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

為什么它會(huì)產(chǎn)生混亂？

即使Z-index并不是一個(gè)難以理解的屬性，但它卻會(huì)因錯(cuò)誤的假設(shè)而使很多初級(jí)的開發(fā)人員陷入混亂�；靵y發(fā)生的原因是因?yàn)閆-index只能工作在被明確定義了absolute，fixed或relative 這三個(gè)定位屬性的元素中。

為了證明Z-index只能工作于被定位了的元素中，這里有同樣的三個(gè)BOX，它們應(yīng)用了Z-index屬性來嘗試打破他們自然的層疊順序。

灰色的BOX具有“9999”的Z-index值，藍(lán)色的BOX有“500”的Z-index值，金色的有“1”的Z-index值。合乎邏輯的，你會(huì)認(rèn)為這三個(gè)BOX的層疊順序會(huì)倒過來。但事實(shí)卻不是這樣，因?yàn)檫@些元素都沒被設(shè)定position屬性。

下面是同樣的三個(gè)BOX，分別都被設(shè)置了position: relative，他們的Z-index值還是按照上面那段設(shè)定。

現(xiàn)在的結(jié)果是我們所期待的了：這些元素的層疊順序?qū)崿F(xiàn)了反向；灰色的BOX覆蓋在藍(lán)色之上，藍(lán)色的覆蓋在金色之上。

語法

#grey_box { 
    width: 200px; 
    height: 200px; 
    border: solid 1px #ccc; 
    background: #ddd; 
    position: relative; 
    z-index: 9999; 
} 

#blue_box { 
    width: 200px; 
    height: 200px; 
    border: solid 1px #4a7497; 
    background: #8daac3; 
    position: relative; 
    z-index: 500; 
} 

#gold_box { 
    width: 200px; 
    height: 200px; 
    border: solid 1px #8b6125; 
    background: #ba945d; 
    position: relative; 
    z-index: 1; 
}

重復(fù)一下，Z-index屬性只能工作于那些被定義了position屬性的元素中。這并沒有被足夠的重視，尤其是對(duì)于那些新手。

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 全透視:CSS Z-index 屬性 [1] 下一頁 全透視:CSS Z-index 屬性 [3]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。