如何将两个 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>

那么我应该在这段代码中添加什么，使得当浏览器渲染此代码时，这两个 div 元素会出现在同一个位置？

- trrrrrrm

Answer 1

关于绝对定位的所有陈述都是正确的。然而，人们没有提到，在父容器上需要使用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>

根据您想置于顶部的元素不同，您可以将 z-index应用于绝对定位的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>

- Corey Ballou

---

我所做的是使div不同颜色，然后使其中一个大小不同，以便可以知道哪一个在顶部。然后我将其改回需要的样子。 - tahdhaze09

@tahdhaze09：如果你只涉及到两个绝对定位的div，那么你只需要改变一个背景颜色。如果你看到颜色，显然它在顶部 :-P - Corey Ballou

@Laith - 在 Stack Overflow 上的常见做法是，如果回答解决了你的问题或回答了你的问题，就接受最正确和完整的答案作为正确答案。 - Corey Ballou

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

- tahdhaze09

---

请确保答案是自包含的。如果不阅读链接的网页，这个描述就没有太大帮助——而这些页面可能会随着时间的推移而消失或更改。 - Kissaki

Answer 3

将第一个位置设置为position:absolute，这样它就会脱离页面的正常流程。

一些帮助。

- Dean J

Answer 4

我相信唯一的方法是使用绝对定位

- Hogan

Answer 5

您可以使用绝对定位。

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

- Vincent Ramdhanie