IE6、IE7的z-index bug

問題描述：

假設三個div， 依序為A、B、C，裡面個包一個div，分別為A1、B1、C1。如果設定position:absolute在A1跟C1上。且A1設定z-inde:2，C1設定z-index:1，在FF正常顯示下，A1會壓在C1之上。

但在IE6、IE7底下，當C1設定position之後。他們會自動給C一個z-index，且C因為排在A之後，所以C以內的區塊z-index永遠壓在A之上，不管A 或A以內的z-index正值設定多大都一樣。

解決方式：

  1. 把C設定z-index為負值。但這個作法有個很大的壞處，就是C裡面的超連結全部都會被遮蔽，以至於無法使用。
  2. 因為通常會出現這個問題，是在表頭的下拉選單會被底下的蓋住，所以更好的作法是表頭設定position:relative;並且加上z-index:2;或更大的數值，後面那個一定要加，不然一樣沒效。這樣底下的區塊超連結也會不被遮蔽。這個原理跟利用margin設定製作圖div覆蓋效果 所提到的是相同的。

CSS兩欄排版的問題

由於要做兩欄排版、且邊欄的高度要自動延伸的話，要在最外框的DIV使用overflow屬性。假如這時候在內容需要使用點選超連結移動到命名錨點時，會發現移動到命名錨點後，以上的內容不見了。不管使用哪一種瀏覽器都一樣。

這是因為overflow需要設定hidden所致。等於點到命名錨點的時候，不是整頁移動，而是只有子元素的內容移動，而超出父元素之外因為hidden的設定因此就被隱藏了。

但是為了要可以做成邊欄可延伸的排版，overflow此屬性不可能移除。因此解法是替需要點選超連結移動到命名錨點的頁面，加上網頁錨點平滑移動效果，就不會有內容不見得問題。

使用說明參考連結
http://www.webppd.com/thread-2709-1-1.html

平滑錨點移動效果demo
http://www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html

margin塌陷問題

狀況一：
在父元素div裡面的第一個子元素，如果有margin-top的時候，margin-top會被父元素的div搶走。最後一個子元素的margin-bottom也會被父元素的div搶走。

解法：有兩種，我是用把父元素的overflow設定成hidden的方式。另外看到有人說把子元素設定成inline-block也可以。可參考這篇。實作上，父元素如果設定float，也會避免掉這個問題。

狀況二：
兩個層級相同的子元素，上面的有margin-bottom，下面的有margin-top時。會有塌陷的問題，於是他們之間的間距不會是bottom+top，而是看誰大就用誰。

解法：這其實沒什麼特別解法，反正就是只用一邊的margin就好，比較單純。