Html 将一个 div 元素放在另一个元素上方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9452969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position a div element above another one
提问by John Svensson
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.
在下图中，我想将浮木/炸弹图像放在其正上方的图像上；因此，我想删除/折叠这两个divs之间的“空间” 。然而，这种差距并不是由标记本身造成的，因为正如您所看到的，“炸弹”使图片在高度上变大。
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.
我认为这可以使用 CSS 来完成。但是如何？任何解决方案都需要跨浏览器工作。
HTML:
HTML：
<header></header>
<nav></nav>
CSS:
CSS：
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
}
回答by Jared Farrish
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;
}
回答by Karl Barker
Relative positioning could fix this for you:
相对定位可以为您解决这个问题：
nav {
position: relative;
top: -20px;
}
回答by Bram Vanroy
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.
负值的最高利润确实是您所寻求的。如果导航会在标题下方消失，您应该更改导航的 z-index。尝试不同的数字：100、1000、10000 等。
回答by Odee
place the div inside the header div.
将 div 放在标题 div 内。
nav {
position: relative;
bottom: -30px;
}
