将DIV堆叠在一起？

是否有可能堆积多个DIV：

<div> <div></div> <div></div> <div></div> <div></div> </div> 

那么所有这些内部DIV都有相同的X和Y位置？ 默认情况下，它们都会按照最后一个DIV的高度增加Y位置。

我有一种浮动或显示或其他技巧可以咬一口的感觉？

编辑：父DIV有位置相对，所以，使用绝对位置似乎并不工作。

Answer 1

不pipe你想要的位置外部div，然后使用绝对定位内部div。 他们都会堆叠起来

 <style type =“text / css”>
 .inner {
  位置：绝对;
 }
 </样式>

 <div class =“outer”>
    <div class =“inner”> 1 </ div>
    <div class =“inner”> 2 </ div>
    <div class =“inner”> 3 </ div>
    <div class =“inner”> 4 </ div>
 </ DIV>

Answer 2

要添加到戴夫的答案：

 div { position: relative; } div div { position: absolute; top: 0; left: 0; } 

Answer 3

style="position:absolute"

Answer 4

如果你的意思是把一个放在另一个的顶部（一个放在同一个X，Y位置，但是不同的Z位置），可以尝试使用z-index CSS属性。 这应该工作（未经testing）

 <div> <div style='z-index: 1'>1</div> <div style='z-index: 2'>2</div> <div style='z-index: 3'>3</div> <div style='z-index: 4'>4</div> </div> 

这应该在3的顶部显示4，在2的顶部显示3，依此类推。 z指数越高，元素在z轴上的位置就越高。 我希望这有助于你:)

Answer 5

我把div的位置稍微偏移一点，以便在工作中看到它。
HTML

 <div class="outer"> <div class="bot">BOT</div> <div class="top">TOP</div> </div> 

CSS .outer {position：relative; margin-top：20px; }

 .top { position: absolute; margin-top: -10px; background-color: green; } .bot { position: absolute; background-color: yellow; } 

https://codepen.io/anon/pen/EXxKzP

Answer 6

我知道这个post有点老，但我有同样的问题，并试图修复它几个小时。 最后我find了解决办法：

如果我们有2个盒子放置绝对

 <div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div> <div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div> 

我们希望屏幕上会有一个盒子。 要做到这一点，我们必须将margin-bottom设置为-height，所以这样做：

 <div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div> <div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div> 

对我来说工作得很好。

Answer 7

我有同样的要求，我已经尝试了下面的小提琴。

 #container1 { background-color:red; position:absolute; left:0; top:0; height:230px; width:300px; z-index:2; } #container2 { background-color:blue; position:absolute; left:0; top:0; height:300px; width:300px; z-index:1; } #container { position : relative; height:350px; width:350px; background-color:yellow; } 

https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview