Position a div element above another one

Question

In the picture below, I am wanting to place the driftwood/bomb image over the image directly above it; hence, I want to remove/collapse the "space" between these two divs. The gap, however, is not caused by the markup itself, because as you can see the "bomb" is making the picture bigger on the height.

I would like to position the navigation bar on the "header" (so the brown top of the navigation is just below the header bottom), so the gap disappears. These images are meant to overlap.

I assume this can be done using CSS. But how? Whatever solution needs to work cross-browser.

HTML:

<header></header>
<nav></nav>

CSS:

header {
    width: 980px;
    height: 327px;
    background: url(../images/header.png);
}

nav {
    width: 980px;
    height: 180px;
    background: url(../images/menu.png);
}

Answer 1

Maybe a negative margin?

header {
    width: 980px;
    height: 327px;
    background: url(../images/header.png);
}

nav {
    width: 980px;
    height: 180px;
    background: url(../images/menu.png);
    margin: -90px auto 0;
}

http://jsfiddle.net/NmUfT/

Answer 2

Relative positioning could fix this for you:

nav {
  position: relative;
  top: -20px;
}