将DIV堆叠在一起?

是否有可能堆积多个DIV:

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

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

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

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

不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>

要添加到戴夫的答案:

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

style="position:absolute"

如果你的意思是把一个放在另一个的顶部(一个放在同一个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轴上的位置就越高。 我希望这有助于你:)

我把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

我知道这个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> 

对我来说工作得很好。

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

 #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