製作內的DIV重疊另一個外DIV

在下面的例子中有一個藍色的div隨後其下的紅色的div。他們被設計成具有一定的高度。在上面的藍色div中有另一個div，一個白色的div，其內容太長而不能完全顯示在上面的藍色div內。製作內的DIV重疊另一個外DIV

我想什麼有發生的是白色的div來覆蓋這兩個div的。我不想從藍色div中刪除白色div，因爲白色div最終將作爲其他項目的彈出式菜單添加到藍色div中。所以它屬於藍色div，我只是希望它暫時覆蓋兩個div。

有沒有辦法做到這一點？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<head> 
<title>Overlay</title> 
<style type="text/css"> 
#top-div{ 
    height: 100px; 
    background-color: blue; 
} 
#bottom-div{ 
    height: 100px; 
    background-color: red; 
} 
#my-list{ 
    width: 100px; 
    background-color: white; 
    border: solid 1px black; 
} 
</style>   
</head> 
<body> 
<div id="top-div"> 
    <div id="my-list"> 
    <ul> 
     <li>one</li> 
     <li>two</li> 
     <li>three</li> 
     <li>four</li> 
     <li>five</li> 
     <li>six</li> 
    </ul> 
    </div> 
</div> 
<div id="bottom-div">I am the footer</div> 
</body> 
</html>

來源

2012-02-21 dl__

是的，在我的名單CSS規則，添加：

float: left; 
position: absolute;

浮動將把DIV都疊加的背景div的。絕對會阻止在後臺div的文本來自各地的彈出DIV包裝。

來源

2012-02-21 16:25:41

謝謝，這工作 – 2012-02-21 16:30:33

只需添加到您的回答，請確保父格「頂格」也有一個位置集（最有可能「的立場：相對」）。否則，「my-list」將自己定位到第一個非靜態元素。 – Zensar 2012-02-21 16:32:26

@Zensar - 是的，這是有道理的 – 2012-02-21 16:46:50

由於父母比其子高z-index，您需要更改默認的瀏覽器堆疊行爲。添加position: relative每個元素，然後指定父及其子z-index。兒童的z-index應該高於父母。

來源

2012-02-21 16:28:01

試試這個：

#my-list{ 
    width: 100px; 
    position:relative; 
    z-index: 2; 
    background-color: white; 
    border: solid 1px black; 
}

來源

2012-02-21 16:32:32

製作內的DIV重疊另一個外DIV

回答

相關問題