如何在每个上方放置两个div

Question

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

CSS：

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

HTML：

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

那么我应该为这段代码添加什么呢？所以当浏览器渲染这段代码时，2个div将在同一个地方？

Answer 1

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

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

支持CSS：

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

根据您想要的元素，您可以将 z-index es应用于绝对定位的div。较高的z-index使元素更具重要性，将其置于其他元素的顶部：

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

Answer 2

使用z-index将div放在另一个上面：

[http://www.w3schools.com/Css/pr_pos_z-index.asp][1]

因此，您将使用绝对/相对定位来定位div，然后使用z-index对它们进行分层：

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 3

制作第一个位置：绝对，这应该将其从页面的正常流程中取出。

some help

Answer 4

我认为唯一的方法是使用绝对定位

Answer 5

您可以使用绝对定位。

  #num1,#num2{ display : inline position:absolute; left:50px;top:10px; }