兩個其他divs在IE6的獨立容器之間的三明治div

我正在處理一個棘手的設計與幾個圖層，它需要我在另一個容器中的兩個其他重疊的div之間分層div。這是我這在Firefox的工作簡化的例子，但不是IE6（這當然是首選的客戶端瀏覽器）：http://dawnup.com/sandwich 兩個其他divs在IE6的獨立容器之間的三明治div

來源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<style type="text/css"> 
    div { 
     width:200px; 
     height:200px; 
     position:absolute; 
    } 

    #middle { 
     background-color:#aaa; 
     left:30px; 
     top:30px; 
     z-index:1; 
    } 
    #bottom { 
     height:200px; 
     background-color:#777; 
     left:0px; 
    } 
    #top { 
     background-color:#ccc; 
     left:40px; 
     top:40px; 
     z-index:2; 
    } 
</style> 

</head> 
<body> 
    <div id="middle">MIDDLE</div> 
    <div id="container"> 
     <div id="bottom">BOTTOM 
      <div id="top">TOP</div> 
     </div> 
    </div> 
</body> 
</html>

有沒有竅門能讓在IE6工作？或者這種重疊是不可能的？

在此先感謝

來源

2010-07-08 James

爲什麼你就不能移動#top返回元素，所以它不是底部內？

來源

2010-07-08 07:18:33

所有div都有位置：絕對。我也嘗試過親戚，但我得到了同樣的結果。 – James 2010-07-08 14:33:35

你不能只移動底部以外的頂部嗎？ – 2010-07-08 14:48:13

你也可以嘗試爲#bottom指定一個低於#top的顯式'z-index'。 – 2010-07-08 14:49:01

兩個其他divs在IE6的獨立容器之間的三明治div

回答

相關問題