武林網(www.49028c.com)文章簡介：css心得之善用 position:relative。

可能是個人習慣吧，我個人在寫css 樣式的時候 position:relative 都很少用。不到逼不得已不用，因為這東西在面對IE大叔的時候總是會各種被推到，比如多個positon 嵌套的的時候 會產生 類似 z-index 優先級的失控，不知道其他coder們碰到過這個問題沒？反正我是碰到不下1次了。

舉個栗子如下：html 代碼 節略寫法，你懂的

從上面 的代碼 本來沒啥問題，問題在于給他穿上衣服(css)之后，因為一些需求，你講li 的css position:relative 了，
那么li 就傻逼了，這個時候你怎么設置li 的z-index 為多大 都蓋不過 之后下一個li 的內容。
不理解上面表達的意思可以見下圖。

css代碼

如圖，左邊是chrome 下的效果，右側是IE6的效果，可見，當給li 設置positon:relative 后無論 里面的 元素設置z-index 為多大，都改不過之后的li 內容。(爺的我又把上面的字重新打了一遍 = =)

從視覺上面理解，這樣的情況就像 AI(Illustrator)里的圖層一樣，一層比一層高，也像個沙箱，內部的z-index 是怎么也不能超越下一層的z-index。
最好不要給列表型的li 或者 div 添加 position:relative，一直以來針對IE這樣頭疼的bug，都是以避開這樣的情況來解決。(其實應該不算bug，應該是瀏覽器開發者理解性上的不同)。

當然還有一種辦法，由于是因為下一個li 設置了position 蓋住了前一個position 的 li，那么只要避免position蓋住position就可以勉強實現這樣的情況。所以你只需要在position:absolute的dom外面套一層div，做到不蓋住前一個li中的 position:absolute就可以。

另外一種方法是在特定的情況下如hover事件，如觸發式 彈出浮窗(顯示更多信息)，
這個時候我是這樣來實現， 當hover的時候 給 li 添加一個class “hover”， 然后只要定義hover 的時候是position:relative就可以了，這樣的好處是hover 的時候其他 li 沒有position:relative ，那么就沒有之前的bug了。
對于高級瀏覽器 可以直接寫:hover 甚至都可以脫離 js 效率會更高

先看下圖，左側這樣的按鈕不知道應該會在一些效果里接觸過吧？類似向左向右的按鈕，

以此類推，上圖中apple 的導航也可以使用這樣的辦法來實現效果。是不是挺帶感^__^