CODEWITHSUNDEEP
csshtml
John Svensson
John Svensson

Reputation: 461

Position a div element above another one

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.

enter image description here

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);
}

Upvotes: 6

Views: 29354

Answers (4)

Odee
Odee

Reputation: 15

place the div inside the header div. 

nav {
   position: relative;
   bottom: -30px;
    }

Upvotes: 1

Bram Vanroy
Bram Vanroy

Reputation: 28554

A top-margin with a negative value is indeed what you seek. If the nav would disappear beneath the header, you should change the nav's z-index. Try different numbers: 100, 1000, 10000 etc.

Upvotes: 0

Karl Barker
Karl Barker

Reputation: 11381

Relative positioning could fix this for you:

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

Upvotes: 3

Jared Farrish
Jared Farrish

Reputation: 49238

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/

Upvotes: 6

Related Questions