css關於z index引數失效

2021-10-08 13:39:48 字數 1195 閱讀 3567

z-index失效的情況:

乙個標籤絕對定位遮蓋,問題標籤的一部分,問題標籤新增z-index值後,並沒能在絕對定位標籤之上

頁面dom結構如下:

//初始的css樣式

頁面:

樣式:

.son1

期待的頁面效果應該是son2遮蓋son1,(黃色在紅色上面)

此時z-index失效!!!!

解決方法:

(此時由於son1、son2都是絕對定位所以son3到最上面被遮蓋在下面了)

.father
樣式展示:

失效原因猜測:

son2由於未設定postion的屬性,預設是static,在菜鳥教程的z-index指出

「z-index 僅能在定位元素上奏效(例如 position:absolute;)!「

所以為新增postion屬性時,son2不屬於定位元素,以至於z-index失效,所以給問題標籤新增上postion或者是在父標籤新增彈性布局都是將兩個重合的div做定位處理,使的z-index生效。

z-index失效主要就是因為當前的問題標籤不屬於定位元素,從而沒有層次的比較物件。所以解決的方法大致就是將問題元素和需要進行遮蓋 的其他元素進行定位處理,要麼問題標籤自己進行positon的設定(不能使static)要麼也可以是父標籤使用彈性布局對他們進行定位布局的設定。不同的positon屬性以及彈性布局會有不同的呈現結果(主要是對第三個son3標籤的位置影響)所以到時候進行定位處理要注意是否還要考慮到第三個標籤的位置要求,從而選擇最適合的乙個。

關於css中的z index 屬性

檢索或設定物件的層疊順序。較大 number 值的物件會覆蓋在較小 number 值的物件之上。如兩個絕對定位物件的此屬性具有同樣的 number 值,那麼將依據它們在html文件中宣告的順序層疊。對於未指定此屬性的絕對定位物件,此屬性的 number 值為正數的物件會在其之上,而 number 值...

關於CSS中z index的用法

我們經常在做網頁的時候,想讓後面的元素覆蓋前面的元素該怎麼做呢,這時候就會用到z index,關於z index的用法如下 對於同級元素,預設情況下文件流後面的元素會覆蓋前面的。對於同級元素,position定位不是static的時候,z index大的元素會覆蓋z index小的元素,即z ind...

z index失效問題解析

問題源自於我在原網頁中加入了乙個下拉列表,在原先單獨的下拉列表 裡z index並沒有問題換到了複雜的網頁裡z index顯示混亂,由此我進行了相關的了解 我們先看一段 可以複製下來自己看一下 先給出結果圖 我們可以看到兩個包在one裡的divz index設定值都比four這個div大但是結果確是...