z-index失效的幾種情況

? ? 注意點(diǎn):

? ? ? ? ?(1):z-index屬性只作用在被定位了的元素上。所以如果你在一個(gè)沒(méi)被定位的元素上使用z-index的話,是不會(huì)有效果的.

? ? ? ? ? (2)同一個(gè)父元素下的元素的層疊效果會(huì)受父元素的z-index影響,如果父元素的z-index值很小,那么子元素的z-index值很大也不起作用


失效的情況:

1、父標(biāo)簽 position屬性為relative;

2、問(wèn)題標(biāo)簽無(wú)position屬性(不包括static);

3、問(wèn)題標(biāo)簽含有浮動(dòng)(float)屬性。

4、問(wèn)題標(biāo)簽的祖先標(biāo)簽的z-index值比較小


解決方法:

第一種:? position:relative改為position:absolute;

第二種:浮動(dòng)元素添加position屬性(如relative,absolute等);

第三種:去除浮動(dòng)。

第四種:提高父標(biāo)簽的z-index值

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,167評(píng)論 1 92
  • CSS 定位 CSS有三種基本的定位機(jī)制:普通流,浮動(dòng),絕對(duì)定位(absolute, fixed):普通流是默認(rèn)定...
    _空空閱讀 5,978評(píng)論 0 15
  • 一:在制作一個(gè)Web應(yīng)用或Web站點(diǎn)的過(guò)程中,你是如何考慮他的UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,366評(píng)論 0 1
  • 1. 浮動(dòng)元素有什么特征?對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響? 特征:浮動(dòng)元素不在普通的文檔流中...
    在乎者也閱讀 1,309評(píng)論 0 1
  • 國(guó)家重點(diǎn)實(shí)驗(yàn)室是國(guó)家科技創(chuàng)新體系的重要組成部分,也是國(guó)家組織高水平基礎(chǔ)研究和應(yīng)用基礎(chǔ)研究、聚集和培養(yǎng)優(yōu)秀科學(xué)家、開(kāi)...
    好書郎閱讀 1,870評(píng)論 2 1

友情鏈接更多精彩內(nèi)容