将div元素放在另一个元素上方

Question

在下图中，我想将浮木/炸弹图像放在正上方的图像上;因此，我想删除/折叠这两个div之间的“空格”。然而，差距并不是由标记本身引起的，因为正如你所看到的那样，“炸弹”正在使图片的高度更大。

我想将导航栏放在“标题”上（因此导航的棕色顶部正好在标题底部下方），因此间隙消失了。这些图像意味着重叠。

我认为这可以使用CSS完成。但是怎么样？无论何种解决方案都需要跨浏览器工作。

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

可能是负利润？

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

相对定位可以解决这个问题：

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

Answer 3

具有负值的上边距确实是您寻求的。如果导航将在标题下方消失，则应更改导航的z-index。尝试不同的数字：100,1000,10000等。

Answer 4

将div放在标题div中。

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