如何在每个上方放置两个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.

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

支持CSS:

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

根据您想要的顶部元素,您可以将z-index es应用于绝对定位的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;
}