Html 如何在每个上方放置两个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1834831/
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
how to position two divs above each over
提问by trrrrrrm
Is there any way to start drawing divs from the same point? That means if I add new div and then I add another div, they will appear above each other. Because I want to move them all together depending on the same point.
有没有办法从同一点开始绘制div？这意味着如果我添加新的 div，然后添加另一个 div，它们将出现在彼此之上。因为我想根据同一点将它们全部移动在一起。
CSS:
CSS：
#num1,#num2{
display : inline
position:relative;
left:50px;
}
HTML:
HTML：
<div id='container'>
<div id='num1'></div>
<div id='num2'></div>
</div>
So what should I add to this code so when the browser render this code the 2 divs will be on the same place?
那么我应该向这段代码添加什么，以便当浏览器呈现这段代码时，2 个 div 将在同一个地方？
回答by Corey Ballou
All statements regarding absolute positioning are correct. People failed to mention, however, that you need position: relativeon the parent container.
所有关于绝对定位的陈述都是正确的。但是，人们没有提到您需要position: relative在父容器上。
#container {
position: relative;
}
#num1,
#num2 {
position: absolute;
left: 50px;
}<div id='container'>
<div id='num1'>1</div>
<div id='num2'>2</div>
</div>Depending on which element you want on top, you can apply z-indexes to your absolutely positioned divs. A higher z-index gives the element more importance, placing it on the top of the other elements:
根据您想要在顶部的元素，您可以将z-indexes 应用于绝对定位的 div。较高的 z-index 使元素更重要，将其置于其他元素的顶部：
#container {
position: relative;
}
#num1,
#num2 {
position: absolute;
left: 50px;
}
/* num2 will be on top of num1 */
#num1 {
z-index: 1;
}
#num2 {
z-index: 2;
}<div id='container'>
<div id='num1'>1</div>
<div id='num2'>2</div>
</div>回答by tahdhaze09
Use z-index to position divs on top of one another:
使用 z-index 将 div 置于彼此之上：
[http://www.w3schools.com/Css/pr_pos_z-index.asp][1]
[ http://www.w3schools.com/Css/pr_pos_z-index.asp][1]
So, you'll position the divs with absolute/relative positioning and then use z-index to layer them:
因此，您将使用绝对/相对定位来定位 div，然后使用 z-index 将它们分层：
回答by Dean J
回答by Hogan
I believe the only way to do this is to use absolute positioning
我相信做到这一点的唯一方法是使用绝对定位
回答by Vincent Ramdhanie
You can use absolute positioning.
您可以使用绝对定位。
#num1,#num2{ display : inline position:absolute; left:50px;top:10px; }
