常見的CSS代碼無效問題
阿新 • • 發佈：2017-05-22
absolut 屬性 transform nsf 定位 -i fixed relative ans
在前端開發中經常會遇到一些CSS代碼設置無效的情況，下面我總結一些我遇到的情況。
1.height：100%無效
百分比的高度在設定時需要根據這個元素的父元素容器的高度。例如一個div的高度設為40%，而父元素的高度為100px時，那麽這個div的高度應為40px。
在默認情況下<html></html><body></body>的高度都是0，而兩個元素又是其他元素的父元素，所以height：100%當然也是0。解決方法是在html，body的CSS中都加上height:100%。
2.z-index無效
z-index在使用時有一個前提，只能在position是relative，absolute，fixed才有效。在滿足這個條件後還需註意dome節點關系，z-index值只決定同一父元素中的同級子元素的堆疊順序。堆疊順序不是看子元素的z-index而是看父元素的z-index。
3.position:fixed無效
fixed定位的元素，如果父元素有transform屬性，那麽fixed無效，原因尚不清楚。設置fixed的元素其父元素不要設置transform屬性，記住這個情況就行。
常見的CSS代碼無效問題