将一个 div 元素定位在另一个元素的上方

Question

在下面的图片中，我想将漂流木/炸弹图像放在直接上方的图像上方；因此，我想删除/折叠这两个

之间的“空格”。然而，间隙并不是由标记本身引起的，因为您可以看到，“炸弹”使图片在高度上变大。

我想将导航栏定位在“标题”上（因此导航栏的棕色顶部仅在标题底部以下），以便消除间隙。这些图像意味着重叠。

我认为可以使用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);
}

- John Svensson

---

你能发布你的HTML代码吗？或者尝试在两个元素中添加float:left。 - Mukesh

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/

- Jared Farrish

Answer 2

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

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

- Karl Barker

---

我刚刚意识到，在nav下方放置与top相同大小的空格：http://jsfiddle.net/NmUfT/2/ 参见：https://dev59.com/SHE95IYBdhLWcg3whOLK#2280941 - Jared Farrish

Answer 3

将 div 放置在 header div 内部。

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

- Odee

Answer 4

一个带有负值的上边距确实是您所寻求的。如果导航栏消失在标题下面，您应该更改导航栏的 z-index。尝试不同的数字：100、1000、10000 等。

- Bram Vanroy