How would you make two <div>s overlap?

|               |
 ---|    LOGO       |------------------------
|   |_______________|  LINKS                |
|             CONTENT                       |

html, body {
  margin: 0px;
}

#logo {
  position: absolute; // reposition logo from the natural layout
  left: 75px;
  top: 0px;
  width: 300px;
  height: 200px;
  z-index: 2;
}

#content {
  margin-top: 100px; // provide buffer for logo
}

#links {
  height: 75px;
  margin-left: 400px; // flush links (with a 25px "padding") right of logo
}

<div id="logo"><img src="logo.jpg" /></div>
<div id="content">
  <div id="links"></div>
</div>

<div style="margin-top: -25px;">

#logo
{
    position: absolute:
    z-index: 2000;
    left: 100px;
    width: 100px;
    height: 50px;
}

div#logo {
  position: absolute;
  left: 100px; // or whatever
}