IE6 position:absolute 時使用Bottom的bug

這兩天在研究裝飾Blogger
在弄旁邊的綠色圓角區塊的時候，遇到了一點問題
我用的佈局



像這樣，用相對去包絕對
Header跟Floor用絕對配置去定位在最高跟最低位
因為當初作素材的時候沒注意到
導致Header的圖片過長
所以我才採取絕對定位(absolute )的方式去做














但是這樣缺出現了floor使用bottom去固定在底部的時候，floor整個走位的問題
floor跑去Container下面非常多的地方
後來發現這是IE6的一個Bug，必須在Container設置height:1%
像這樣

.container{
position:relative;
height:1%;
}

這樣才能避免用Bottom走位的問題

題外話
我當初在作素材的時候沒設計好，Header弄太長，導致會蓋住中間Content的底圖
但是用z-index卻又會造成漸層色沒辦法搭配好還有色差出現
這是當出架構沒有設計好出現的錯誤

照我一開始的設計，content跟content background是綁在一起的，
導致不是Header檔住content，或是反過來content backgroung檔住header


後來靈機一動，我是否能把content跟content backgeound分開?
就像下圖這樣


可以做到這樣的話，我就可以用Header照住Content Background 而不會遮住Content了
因此我只要多一層Div取代Content Background就可以了，如下


不過我後來floor就沒有用absolute 去定位了，只讓他直接掛在Content之下
因為發現如果Container的size有伸縮的話，IE6底下floor用絕對定位不會跟著改變position
導致整個版面變亂，雖然Firefox是會跟著調整position，但是還是力求統一


最後做個筆記，在弄z-index的時候要把position設定成absolute或relative，不然他不會起作用