font

1月 02, 2016

當你發現z-index沒有用的時候,就用這個保證有效四步驟!



網頁切版的時候偶爾會需要設定圖層的優先順序,
可是我常常是設定完z-index卻還是起不了作用,
後來找到了這個健康四步驟,
覺得太好用了所以絕對要記錄下來:(以下轉自這裡




在實際開發中,div+css經常會碰到層級的問題
其中有個很頭痛的就是z-index控制層級時,老是發現z-index不起作用
作者依據自己的經驗,總結出以下步驟:
1、判斷被覆蓋的層(想要置頂的層)的position是否也為relative或者absolute
2、如果1成立,則判斷是否此層的z-index比誤覆蓋的層的z-index數值大
3、如果2成立,判斷是否此層的父級元素比誤覆蓋的層的z-index數值大
4、如果3成立,判斷是否此層的父級元素比誤覆蓋的層的父級層的z-index數值大
到此為止,99%的該問題會得到解決!
內容不多,可是會非常實用!



我本來找了一堆國內外的資料,
找到這裡來的時候一開始也想說這幾行字是怎麼可能會解決問題,
結果發現超好用啊!!!成功解決我的問題
且對於z-index的問題來說幾乎可以有效解決的裱框等級!
所以私心的自己記錄一下好了~



另外要注意的是,
通常z-index會不起作用的原因除了忘了設定position以外,
也是因為包在最外層的div設定的問題,
可以參考我做的這個示意:

橘色都設定z-index:100了,還是被z-index:10的藍綠色壓到的原因,
正是因為z-index順序是先被兩個物件最外層的紅色數值給影響
(2 > 1,所以z-index:2的紅色不管裡面藍綠色設定多少,都會在z-index:1的紅色之上),
這時有兩個方式:




1.最外層的紅色皆不設定z-index


2.把z-index:1的數值改為2以上,比另一個紅色的z-index大(例如:3)





這樣是不是就看懂啦!





Related Posts Plugin for WordPress, Blogger...

ShareThis