CSS: How to make a div block *not* take space in its parent container

Question

If I have 2 div tags:

<div id="parentDiv">
   <div id="childDiv"><!-- other html --></div>
   <!-- parent div html -->
</div>

I want the content of <div id="childDiv"> to overlap the content <!-- parent div html -->.

Reason (in case this looks like bad code design to anyone): I need a hack workaround in google sites, I cannot add custom code on the sidebar nav, only in the main html space, I want to float a div that takes no space and relatively position it over the side bar to get around the forced limitation.

I can do everything except stop the childDiv from taking up space in it's bastardized main-page container.

Answer 1

You can give it a position absolute, and navigate it with margins.

    #childDiv {
      position: absolute;
      margin-top: -100px;
      margin-left: -100px;
    }

Answer 2

How about a simple

#childDiv {height:0; overflow:visible;}

But you probably want it to have a background colour, hm? Hm.