html元素z-index(HTML元素操作中支持獲取HTML代碼的屬性是)
stacking context mdn 鏈接 這里只簡(jiǎn)單介紹一下常用的 Stacking Context 在一個(gè)層疊上下文內(nèi),不同元素的層疊次序如下圖所示由內(nèi)到外概括來(lái)說(shuō),zindex為正 zindexautozindex0不依賴zindex的。
zindex的值可以是負(fù)數(shù),也可以為0,也可以無(wú)群大,數(shù)值大的在上方zindex父元素設(shè)置的值權(quán)重比較大,當(dāng)兩個(gè)父元素相比的時(shí)候,父元素起決定作用,其中的子元素設(shè)置多大都沒(méi)有用正常情況下可以看到灰色覆蓋了粉色元。
給包含客戶端的標(biāo)簽加個(gè)屬性zindex,這個(gè)屬性就是用來(lái)設(shè)置層級(jí)關(guān)系的,zindex的值越大,元素就越在上層默認(rèn)zindex 的值為0,將客戶端的標(biāo)簽的zindex設(shè)為1或者更大,它就能顯示在上面了。
2浮動(dòng)元素添加position屬性如relative,absolute等3去除浮動(dòng)2第二種情況IE6下,層級(jí)的表現(xiàn)有時(shí)候不是看子標(biāo)簽的zindex多高,而要看整個(gè)DOM tree節(jié)點(diǎn)樹(shù)的第一個(gè)relative屬性的父標(biāo)簽的層級(jí)egIE7與IE。
那么什么時(shí)候用呢其實(shí)就是我剛剛說(shuō)的那個(gè)場(chǎng)景,zindex發(fā)生重疊后,才會(huì)考慮使用這個(gè),但是呢,他起作用也是有前提的,比如說(shuō),最常見(jiàn)的就是,你首先是定位元素,也就是position不為static的元素才有效,所以說(shuō),如果你使用。
1自動(dòng)當(dāng)屬性的值為自動(dòng)時(shí),瀏覽器會(huì)為元素自動(dòng)分配一個(gè)堆疊上下文,自動(dòng)值意味著元素會(huì)根據(jù)其出現(xiàn)的順序在堆疊上下文中進(jìn)行排序,較晚出現(xiàn)的元素會(huì)覆蓋較早出現(xiàn)的元素2無(wú)單位的整數(shù)值,可為負(fù)數(shù)當(dāng)屬性被設(shè)置為一。
掃描二維碼推送至手機(jī)訪問(wèn)。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請(qǐng)注明出處。