How do you get a div to overlap other HTML?

[kjtocool]

Basically, I have an empty div.  I then use javascript to fill it with content.  As of now, when it is filled, the div bumps everything below it down.  Instead, I want it to overlap what's below it, and have what's below it stay right where it was, with some of it now being hidden.

 

An example is google suggest, when you type something, the suggestions overlap the buttons.

 

Any help is much appreciated!

[dropfaith]

look up absolute posistioning and z index in css

[TheFilmGod]

Html:

<div class="parent_div">
  <div class="overlay">
      <p>content goes here</p>
  </div>
</div>

 

css:

#parent_div {
position: relative;
}
#overlay {
position: absolute;
}