1. 程式人生 > >CSS之巧用z-index屬性

CSS之巧用z-index屬性

大家平時可能是在涉及到absulute佈局元素之間的疊加時才會想起z-index屬性,但是z-index屬性不僅僅對absolute佈局的元素生效
給大家看一下用html中的input和label來實現Native Android中的Material效果


即聚焦在input框上時,使用者名稱或者密碼的提示標籤會上浮,並且改變樣式(字號,字型顏色等)
但是由於html中的placeholder不可能上浮,所以我們要模擬這種效果,但是由於在input上蓋上一層label會導致點選到label上時input無法聚焦,所以我們要解決label擋在input前這一問題

z-index屬性就是解決這個問題的關鍵,z-index屬性可以使用在非absolute佈局的元素上,只要將input框設為透明效果,然後z-index給定一個正的比較大的值,比如100,然後label給定一個負值,比如-10,這樣input框就會蓋在label上,我們點選到label的位置時input就可以正常聚焦,label可以正常上浮

巧用z-index屬性很重要~
CSS(Cascading Style Sheets)很強大~