用z-index來改變堆疊順序
z-index測試**
z-index的運用是需要條件的,與其相關的屬性就是position屬性。我們以三個div來舉例子。
當三個div的position都為relative/absolute/fixed時,發現z-index生效。
總結: 只有position的值為relative/absolute/fixed中的乙個,z-index才會生效。
我們觀察到,div(a)的z-index為20 可是為什麼還會被z-index僅僅為10的div(b)遮擋住呢?
難道是因為z-index繼承給他的子元素了嗎?不z-index可是不繼承給它的子元素的。
我們試試把div(a)的z-index設定成auto,
div(a)成功的遮擋住了z-index比他小的元素。
再試試只把div(a)設定為auto
總結:當z-index的值設定為auto時,不建立新的堆疊上下文,當前堆疊上下文中生成的div的堆疊級別與其父項的框相同。
當z-index的值設定為乙個整數時,該整數是當前堆疊上下文中生成的div的堆疊級別。該框還建立了其堆疊級別的本地堆疊上下文。這意味著後代的z-index不與此元素之外的元素的z-index進行比較。
ps: 通俗講就是,當乙個div的z-index為整數時,它的子元素和外界元素進行比較時,採用父元素的z-index進行比較, 和兄弟元素比較採用自身的z-index。當乙個div的z-index為auto時,如果它和它的兄弟進行比較,採用它父元素的z-index。
如果不設定z-index那麼預設值為auto,則不建立層疊上下文。設定為0則會脫離文件流,建立層疊上下文。
文件流z軸
z index的運用（z index不起作用）
需要完成的效果 處於hover狀態 實際完成效果碰到的問題 處於hover狀態，忽略字型圖示的不一樣，找不到一樣的 可以看到這裡再給下面的盒子新增box shadow後，陰影部分在hover狀態的情況下，還是能顯示出來。這時候想到了z index來解決問題 z index 屬性設定元素的堆疊順序。擁...
關於z index的坑
1.z index要與position搭配起來用，position為absolute，fixed，relative,inherit等，如果在乙個未定位的元素上使用z index是沒有效果的。2.同乙個父元素下的元素的層疊效果會受父元素的z index影響,如果父元素的z index值很小,那麼子元素...
理解 CSS 的 z index 屬性
通常認為html頁面是二維的，但實際上，css還有乙個z index屬性，允許層疊元素。所有的盒模型元素都處於三維座標系中。除了我們常用的橫座標和縱座標，盒模型元素還可以沿著 z軸 層疊擺放，當他們相互覆蓋時，z軸順序就變得十分重要。假定元素沒有指定z index屬性，那麼元素按照如下順序疊放 從底...