CODEWITHSUNDEEP
htmlcss
dl__
dl__

Reputation: 4610

Making inner DIVs overlap another outer DIV

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>

Upvotes: 1

Views: 7095

Answers (3)

Francesco Rigoni
Francesco Rigoni

Reputation: 983

Try this:

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

Upvotes: 0

Nick Beranek
Nick Beranek

Reputation: 2751

Since parents have a higher z-index than its children, you need to change the default browser stacking behavior. Add position: relative to each element, and then specify a z-index on the parent and its children. The z-index for the children should be higher than the parent.

Upvotes: 0

David Houde
David Houde

Reputation: 4778

Yes, in the my-list css rules, add: 

float: left;
position: absolute;

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.

Upvotes: 3

Related Questions