如何将两个div分别放在上面 [英] how to position two divs above each over

问题描述

有什么办法可以从同一点开始绘制div吗？这意味着如果我添加新的div，然后我添加另一个div，它们将出现在彼此之上。因为我想根据同一点将它们全部移到一起。

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.

CSS：

#num1,#num2{
    display : inline
    position:relative;
    left:50px;
}

HTML：

HTML:

<div id='container'>
    <div id='num1'></div>
    <div id='num2'></div>
</div>

那么我应该在这段代码中添加什么，所以当浏览器渲染这个代码时，2个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?

推荐答案

所有关于绝对定位的陈述都是正确的。但是，人们未能提及您在父容器上需要 position：relative 。

All statements regarding absolute positioning are correct. People failed to mention, however, that you need position: relative on the parent container.

<div id='container'>
    <div id='num1'></div>
    <div id='num2'></div>
</div>

支持CSS：

Supporting CSS:

#container { position: relative; }
#num1, #num2 { position: absolute; left: 50px; }

取决于您想要的顶层元素，您可以将 z-index <强大到你绝对定位的div。更高的z-index使元素更加重要，将其放在其他元素的顶部：

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:

/* num2 will be on top of num1 */
#num1 { z-index: 1; }
#num2 { z-index: 2; }

这篇关于如何将两个div分别放在上面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！