In the example below there is a blue div followed by a red div beneath it. They are styled to have a set height. In the upper blue div there is another div, a white div, whose content is too long to be displayed entirely within the upper blue div.
What I would like to have happen is for the white div to overlay both divs. I don’t want to remove the white div from the blue div because the white div will ultimately act as a popup menu for other items to be added to the blue div. So it belongs in the blue div I just want it to temporarily overlay both divs.
Is there a way to make that happen?
<!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>
Yes, in the my-list css rules, add:
The float will put the div overlaying both the background div’s.
The absolute will prevent the text in the background div’s from wrapping around the popup div.