z-index神奇的失效了!!!


z-index簡單介紹

首先z-index只對定位元素有效,什么是定位元素呢,也就是設置了position屬性的元素,position:relative--相對定位,position:absolute--絕對定位,position:fixed--固定定位,position:static靜態定位,position:inherit--繼承父元素定位,但

要注意並不是所有的定位設置都有效果,relative,absolute,fixed肯定是有的,inherit取決於父元素,如果父元素沒有設置定位則z-index無效,注意低版本瀏覽器不支持這個值。最后說下static這個靜態定位,其實這是默認值,表示當前元素

不進行定位,所以如果元素設置了這個屬性值,其實是和沒有設置是一樣的,會使元素忽略掉z-index屬性,使其不起作用。

z-index失效的原因

z-index無論設置多高都不起作用情況

【可能原因】

  • 問題標簽無position屬性(除了static)

  • 問題標簽設置了浮動(float)屬性(在IE6下,子元素如果設置浮動會影響父元素的相對定位設置,最終造成父元素的z-index屬性無效。)

  • 問題標簽的父元素的層疊優先級比其他元素低(簡單來講,對於層疊元素的優先級對比都是在兄弟元素之間進行的,子元素的優先級並不會影響到父元素與其他兄弟元素之間的優先級關系。這里所指的層疊元素,是指有進行定位並

     且有設置z-index屬性的元素。如果沒有進行定位和設置z-index的元素,其最終層疊優先級反而由當前元素的層疊子元素決定) 

  • 父元素沒設置z-index(IE7以下的IE瀏覽器一定要注意父級元素是否有設置z-index和進行定位,因為在這幾個版本的瀏覽器中,最終決定層疊順序的是最頂層的父元素,算是一個兼容性問題。) 

【解決方法】

  • 給問題標簽設置position屬性(relative、absolute、fixed)

  • 解決方法有三個,第一種就是去除元素的浮動屬性,第二種方法是為浮動元素添加相對定位或者絕對定位,第三種方法就是將父元素的position:relative改為position:absolute。

  • 提高父標簽的z-index值
  • 給父元素設置z-index

參考

解決和分析css中z-index屬性無效的原因

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM